javascript - 将值插入模板 AngularJS

Question

我有一个标记，我将其设置为 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 的动态模型值，而不仅仅是传递的值。这样，当它发生更改时，它会在显示的模板中反射(reflect)更新。该变量是在我存储测试数据的对象中定义的:

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 引用的其他区域已正确设置。这是一些奇怪的范围问题吗？

Answer 1

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

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

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