Syntaxfehler: Token ‚:‘ ist ein unerwartetes Token beim Passieren Variable

Question

ich eine Richtlinie iframely genannt haben auf die Richtlinie, und ich es nicht in einem ng-repeat wie folgt aus:

<iframely url="iterator.url"></iframely> 

Dieser behandelt nur den Wert als Zeichenfolge "iterator.url" , nicht der tatsächliche .url Wert. Zu experimentieren, ich habe nur in einer URL direkt:

<iframely url="https://soundcloud.com/braxe1/braxe-one-more-chance"></iframely> 

die mir die Syntax Error: Token ':' is an unexpected token Fehler gibt. Die nächstgelegene ich vorbei diesen Wert auf die Richtlinie bekommen haben ist:

<iframely url="'{{iterator.url}}'"></iframely> // note double and single quotes 

Dies löst die URL-Parameter von iterator, sondern geht es auch mit der ' ' Apostrophe als Teil der Zeichenfolge entlang.

---

EDIT: Auch das ohne die einfachen Anführungszeichen versucht.

<iframely url="{{iterator.url}}"></iframely> 

Und bekam Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{iterator.url}}] starting at [{iterator.url}}]

Was ist der richtige Weg, dies zu tun?

---

EDIT2: Hier ist der Code für die Richtlinie:

angular.module('iframely', []) 

.directive('iframely', [ '$http', '$sce', function ($http, $sce) { 
    return { 
     replace: true, 
     restrict: "E", 
     scope: { 
      url: '=' 
     }, 
     template: '<div ng-bind-html="content"></div>', 
     link: function (scope, element, attrs) { 
      $http({ 
       url: 'http://localhost:8061/iframely', 
       method: 'GET', 
       params: { 
        url: attrs.url 
       } 
      }) 
      .then(function (result) { 
       scope.content = $sce.trustAsHtml(result.data.html) 
      }) 
     } 
    } 
}]) 

Answer 1

Sie müssen url: '='

von url: '@'

https://docs.angularjs.org/api/ng/service/$compile

Answer 2

Ändern Sie Ihre Richtlinie ersetzen, die folgenden sein :

angular.module('iframely', []) 

.directive('iframely', [ '$http', '$sce', function ($http, $sce) { 
    return { 
     replace: true, 
     restrict: "E", 
     scope: { 
      url: '@' 
     }, 
     template: '<div ng-bind-html="content"></div>', 
     link: function (scope, element, attrs) { 
      $http({ 
       url: 'http://localhost:8061/iframely', 
       method: 'GET', 
       params: { 
        url: scope.url 
       } 
      }) 
      .then(function (result) { 
       scope.content = $sce.trustAsHtml(result.data.html) 
      }) 
     } 
    } 
}]) 

Beachten Sie das '@' im Bereich und die url: scope.url.