AngularJS将属性中的URL传递到指令的隔离范围-意外的令牌':'

AngularJS pass URL in attribute to isolated scope of directive - unexpected token ':'

本文关键字：范围 意外 令牌 隔离 指令 属性 URL AngularJS      更新时间：2023-09-26

我是AngularJS的新手，几天前刚刚开始使用它，所以如果问题本身不正确，请原谅我。

我遇到的问题是，我想通过属性将URL参数传递给指令的隔离范围，但在http://的:部分，它给了我一个错误，说Syntax Error: Token ':' is an unexpected token at column 5 of the expression [http://。。。

指令的HTML部分（我"调用"它的地方）是这样的：

<myDirective datasource="http://url"></myDirective>

我把它绑定到像这样的孤立范围：

scope: {
    dataSource: '=datasource'
}

如果该属性的值仅包含简单字符，则它有效。我该如何解决这个问题？

谢谢。

在您的情况下，angular正在尝试评估datasource属性的值。因为您提到了=，即变量的双向绑定。

如果您将URL封装在'（单引号）中，将解决您的问题。因为上面提到的值将直接绑定到指令隔离的范围变量。

标记

<my-directive datasource="'http://url'"></my-directive>

不要在指令中使用'='，而是使用@，因为您传递的是普通字符串。

scope: {
    dataSource: '@datasource'
}

如果想要双向数据绑定'='，则必须将其与范围变量绑定或传递带引号的字符串：

<myDirective datasource="'http://url'"></myDirective>
Angular尝试将您的值用作变量名。

从这里开始："对象哈希用于在父作用域和隔离作用域之间设置双向绑定（使用'='）或单向绑定（使用[@'）。还有'&'用于绑定到父作用域表达式。"

您应该使用：

scope: {
    dataSource: '@datasource'
}

要定义隔离作用域，只需将'@'放入作用域定义中，并在指令中使用atribute名称。

.directive('ggThumbnail', function()
{
    return {
        restrict: 'E',
        scope: {
            thumbnailSrc: '@',
            thumbnailWidth: '@',
            thumbnailHeight: '@'
        },
        link: function(scope, element, attrs, ctrl)
        {
            ctrl.init(element);
            attrs.$observe('thumbnailSrc', function()
            {
                if (attrs.thumbnailSrc)
                {
                    ctrl.prepareImage();
                }
            });
        }
    };
});
相关文章：