Ошибка синтаксиса: токен ':' - это неожиданный токен при передаче переменной в директиву

У меня есть директива, называемая 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, но также передает его вместе с ' ' одиночными кавычками как часть строки.


EDIT: Также попробовал это без одинарных кавычек.

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

Ответ 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.