Question

我对以下Angular指令无效的原因感到困惑：

JS

angular
    .module("app")
    .directive("symbolImage", function () {
        return {
            restrict: 'AE',
            scope: {
                width: "@",
                height: "@",
                symbol: "@"
            },
            template: "<div>{{width}} {{height}} {{symbol|json}}</div>",
            replace: true
        };
    });

变量

$scope.current = {prop1:{foo:"bar"}, prop2:{foo2:"bar2"}};
$scope.properties = ["prop1", "prop2"];

HTML

<tr ng-repeat="prop in properties">
    <td>
        <symbol-image height="20" width="20" symbol="current[prop]"/>
    </td>
</tr>

预期输出（第一次重复）

20 20 {foo:"bar"}

实际输出（第一次重复）

20 20 "current[prop.key]"

我理解传递给范围的值已经过评估，但似乎并非如此。

感谢任何/所有帮助。

Answer 1

你只需要使用

    <symbol-image height="20" width="20" symbol="{{current[prop]}}"/>

'@'希望你给这个指令一个字符串。 '='希望你给这个指令一个对象。

解决问题的另一种方法是定义你的指令：

        scope: {
            width: "@",
            height: "@",
            symbol: "="
        },

Answer 2

你应该以这种方式宣告你的道具

        scope: {
            width: "@",
            height: "@",
            symbol: "="
        },

属性未在Angular指令中进行评估

2 个答案: