语法错误:在将变量传递给指令时，令牌':'是一个意外的令牌

I have a directive called iframely and I it inside an ng-repeat like this:

我有一个叫iframely的指令我把它放在一个ng-repeat里面

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

This just treats the value as the string "iterator.url", not the actual .url value. To experiment, I just put in a URL directly:

这只是将值当作字符串“迭代器”。url，而不是实际的。url值。为了进行实验，我直接输入一个URL:

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

Which gives me the Syntax Error: Token ':' is an unexpected token error. The closest I've gotten to passing this value to the directive is:

这给了我一个语法错误:Token ':'是一个意外的令牌错误。我将这个值传递给指令的最接近的方法是:

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

This resolves the URL parameter of iterator, but also passes it along with the ' ' single-quotes as part of the string.

这将解析iterator的URL参数，但也将它与' '单引号一起作为字符串的一部分进行传递。

EDIT: Also tried that without the single quotes.

编辑:也试过没有单引号。

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

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

得到错误:[$parse:syntax]语法错误:令牌'{' invalid key at列of the expression [{{{iterator]。url } }][{ iterator.url } }]开始

What is the correct way to do this?

正确的做法是什么?

EDIT2: Here is the code for the directive:

这是指令的代码:

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 个解决方案

#1

You must replace url: '='

必须替换url: '='

By url: '@'

通过url:“@”

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

美元https://docs.angularjs.org/api/ng/service/编译

#2

Change your directive to be the following:

更改指示如下:

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

Notice the '@' in the scope and the url: scope.url.

请注意范围中的“@”和url: scope.url。

#1