Errore di sintassi: Token ':' è un token imprevisto quando la variabile di passaggio alla direttiva

Question

ho una direttiva chiamato iframely e mi è all'interno di un ng-repeat come questo:

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

Questo solo considera il valore come stringa "iterator.url" , non il valore effettivo di .url. Per sperimentare, ho appena messo in un URL direttamente:

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

Il che mi dà l'errore Syntax Error: Token ':' is an unexpected token. Il più vicino che ho avuto modo di passare questo valore per la direttiva è:

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

questo risolve il parametro URL del iterator, ma anche lo passa insieme ai ' '-virgolette singole come parte della stringa.

---

EDIT: provato anche che senza le virgolette singole.

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

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

Qual è il modo corretto di fare questo?

---

EDIT2: Ecco il codice per la direttiva:

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

è necessario sostituire url: '='

Con url: '@'

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

Answer 2

Modifica della direttiva ad essere i seguenti :

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) 
      }) 
     } 
    } 
}]) 

Notare "@" nell'ambito e lo url: scope.url.