angularjs - AngularJS 指令语法

Question

对不起这个菜鸟问题:)

使用 AngularJS，我想使用UI Bootstrap显示进度条。

如果值是硬编码的，则该指令运行良好：

<progress percent="67"></progress>

但是，如果我尝试在模板中使用对象值，则会遇到问题：

<progress percent="{{ myobject.progress }}"</progress>

错误信息：

[Exception... "String contains an invalid character" code: "5" nsresult: "0x80530005 (InvalidCharacterError)" location: "http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js Line: 2"]

谁能给我正确的语法？

提前致谢。

Answer 1

Angular UI 中的progress指令引用范围值——该值不使用双花括号绑定。

因此，您希望您的代码简单地成为：

<progress percent="myobject.progress"></progress>

您看到错误是因为 Angular 试图解析参数，并且{在}Angular 表达式中无效。

您可以在进度条文档中看到正确的使用方法。请注意，该属性中没有大括号。

Answer 2

因此，您必须设置指令属性的隔离范围，以便正确评估这些属性。例如：

App.directive('progressbar', function() {
    return {
        scope: {
            percent: '='  // this is the isolate scope you want to set appropriately.
        },
        ...
    };
});