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

这会解析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 )
            })
        }
    }
}])

注意＆＃39; @＆＃39;在范围和url: scope.url。

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

2 个答案: