Question

抱歉这个noob问题：）

使用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

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

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

Answer 2

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

所以，你希望你的代码只是：

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

您看到错误是因为Angular正在尝试解析参数，而{和}在Angular表达式中无效。

您可以在Progress Bar documentation中看到正确的用法。请注意，属性中没有花括号。

AngularJS指令语法

2 个答案: