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

I'm fairly new to AngularJS and just started using it a few days ago, so forgive me if the question itself is incorrect.

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

The problem I ran into is that I'd like to pass a URL parameter via attribute to the isolated scope of my directive, but at the : part in http:// it gives me an error, saying Syntax Error: Token ':' is an unexpected token at column 5 of the expression [http://...

我遇到的问题是我想通过属性将URL参数传递给我的指令的隔离范围,但在http://的部分它给我一个错误,说语法错误:令牌':'是表达式[http:// ...的第5列的意外标记

The HTML part of the directive (where I "call" it) is something like this:

指令的HTML部分(我称之为“它”)是这样的:

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

And I bind(?) it to the isolated scope like this:

我将(?)绑定到这样的隔离范围:

scope: {
    dataSource: '=datasource'
}

If the value of the attribute contains only simple characters, it works. How can I solve this?

如果属性的值仅包含简单字符,则可以使用。我怎么解决这个问题?

Thanks.

5 个解决方案

#1

In your case angular is trying to evaluating value of datasource attribute. Because you mention = i.e. two way binding for variable.

在您的情况下,angular正在尝试评估数据源属性的值。因为你提到=即变量的双向绑定。

If you wrap URL inside ' (single quote) will solve your problem. because the mentioned value will directly binded to directive isolated scope variable.

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

Markup

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

#2

Dont use '=' in directive instead use @ because you are passing normal string.

不要在指令中使用'='而是使用@,因为你正在传递普通字符串。

scope: {
    dataSource: '@datasource'
}

#3

If you want to to have two-way data binding '=' you have to bind it with a scope variable or pass a quoted string:

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

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

#4

Angular tries to use your value as a variable name.

Angular尝试将您的值用作变量名。

From here: "The object hash is used to set up two-way binding (using '=') or one-way binding (using '@') between the parent scope and the isolate scope. There is also '&' to bind to parent scope expressions."

从这里:“对象哈希用于在父作用域和隔离范围之间建立双向绑定(使用'=')或单向绑定(使用'@')。还有'&'来绑定到父范围表达式。“

You should use:

你应该使用:

scope: {
    dataSource: '@datasource'
}

#5

To define a isolate scope, just put '@' into scope definition and use the atribute name in your directive.

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

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

#1