AngularJS将属性中的URL传递给指令的隔离范围 - 意外令牌'：'答案

【问题标题】：AngularJS pass URL in attribute to isolated scope of directive - unexpected token ':'AngularJS将属性中的URL传递给指令的隔离范围 - 意外令牌'：'
【发布时间】：2015-04-07 20:00:48
【问题描述】：

我对 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'
}

如果属性的值只包含简单的字符，它可以工作。我该如何解决这个问题？

谢谢。

【问题讨论】：

在单引号内包裹网址将起作用<myDirective datasource="url"></myDirective>
你能分享如何创建这个指令

标签： javascript angularjs binding angularjs-directive angularjs-scope

【解决方案1】：

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

scope: {
    dataSource: '@datasource'
}

【讨论】：

当绑定到变量时应该真正使用=，而对于文字字符串应该使用@。其他任何事情都会令人困惑。
由于其他原因我需要双向绑定，我接受了另一个答案。但是你说的很有用，谢谢你。 :)

【解决方案2】：

如果你想拥有双向数据绑定'='，你必须将它与范围变量绑定或传递一个带引号的字符串：

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

【讨论】：

【解决方案3】：

在您的情况下，角度正在尝试评估 datasource 属性的值。因为您提到了=，即变量的两种方式绑定。

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

标记

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

【讨论】：

由于其他原因需要双向绑定，这就是我需要的答案。
@MartinFejes 很高兴为您提供帮助。谢谢。 :)
如果在链接中我有来自范围的变量怎么办？喜欢<my-directive link="#/orders/{{vm.order.id}}"></my-directive>
应该是<my-directive link="'#/orders/' + vm.order.id "></my-directive>

【解决方案4】：

要定义隔离范围，只需将“@”放入范围定义并在指令中使用属性名称。

.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();
                }
            });
        }
    };
});

【讨论】：

你能分享一下如何创建这个指令

【解决方案5】：

Angular 尝试使用你的值作为变量名。

来自here：“对象哈希用于在父作用域和隔离作用域之间建立双向绑定（使用'='）或单向绑定（使用'@'）。还有'&' 绑定到父范围表达式。"

你应该使用：

scope: {
    dataSource: '@datasource'
}

【讨论】：