0

我有一个设置为 true/false 的标志，它改变了某些项目在页面上的显示方式。我在将值放入我的模板并让它实际工作时遇到了一些麻烦。普通的 HTML（不在模板内）可以正常工作。

restrict: 'E',
        scope: {
            speedDirection: "@",
            speedName: "@",
            value: "@",
            editElements: "="
        },
        template:
        '<div>'+
          '<p class="body-text">{{speedDirection}} '+
          '<input type="text" name="{{speedName}}" value="{{value}}" ng-show="editElements">'+
          '<span ng-hide="editElements">{{value}}</span>'+
          '</p>'+
        '</div>',

我想使用 editElements 的动态模型值，而不仅仅是传递的值。这样，当它发生更改时，它将在显示的模板中反映更新。该变量在我存储测试数据的对象中定义：

function MyObject($scope) {
    $scope.editElements = true;

有什么办法可以让它工作吗？我试过通过它（如上），使用“@”和 {{editElement}} 位等等。自定义 HTML 部分：

<speed-limit speed-direction="A to B:"
                    speed-name="reverse"
                    value="{{newObject.speedLimit[0]}}"
                    editElement="editElements">
                    </speed-limit>

更新：我已经安装了 Batarang，它显示了我的自定义元素（速度限制）的特定部分具有“editElement：null”。但是，引用的其他区域 editElements 已正确设置。这是一些奇怪的范围问题吗？

4

1 回答 1

2

正如评论中所讨论的，属性名称可以使用相同的名称，但它必须是蛇形大小写，因此 edit-elements="editElements"：

<speed-limit speed-direction="A to B:"
     speed-name="reverse"
     value="{{newObject.speedLimit[0]}}"
     edit-elements="editElements">
</speed-limit>

不要为此感到难过……我认为每个 Angular 开发人员都在这方面浪费了至少一个小时（或更多）的时间。

于 2013-02-06T18:37:26.293 回答