Ошибка синтаксиса: Знак «:» неожиданный маркер при передаче переменной в директиве

Question

я директива называется iframely и я его внутри ng-repeat, как это:

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

Это просто обрабатывает значение как строку "iterator.url" , а не фактическое значение .url. Для эксперимента я просто положить в URL непосредственно:

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

Который дает мне ошибку Syntax Error: Token ':' is an unexpected token. Ближайшим я получил пропускание этого значения директивы является:

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

Это решает параметр URL в iterator, но и передает его вместе с ' ' одинарных кавычек как часть строки.

---

РЕДАКТИРОВАТЬ: Также попробовал это без одинарных кавычек.

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

И получил Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{iterator.url}}] starting at [{iterator.url}}]

Что такое правильный способ сделать это?

---

EDIT2: Вот код для директивы:

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

Вы должны заменить url: '='

По url: '@'

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

Answer 2

Измените вашу директиву, чтобы быть следующим :

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

Обратите внимание на «@» в области и url: scope.url.