如何在角度指令中绑定布尔值

Question

我想将一些布尔属性绑定/设置到指令中。但我真的不知道如何做到这一点，也不知道如何实现以下行为。

想象一下，我想为一个结构设置一个标志，假设一个列表是可折叠的还是不可折叠的。我有以下HTML代码：

<list items="list.items" name="My list" collapsable="true"></list>

items是双向绑定的，name只是属性

我希望collapsable属性在列表的$作用域中可用，可以通过传递值（true、false或其他值），也可以通过双向绑定

<list items="list.items" name="{{list.name}}" collapsable="list.collapsed"></list>

我正在开发一些UI组件，我想提供多种与它们交互的方式。也许，随着时间的推移，有些人希望通过将对象的属性传递给属性来了解该组件的状态，无论是否折叠。

有办法做到这一点吗？如果我理解错误或我错了，请纠正我。

感谢

Answer 1

您可以为如下布尔值配置自己的单向数据绑定行为：

link: function(scope, element, attrs) {
    attrs.$observe('collapsable', function() {
        scope.collapsable = scope.$eval(attrs.collabsable);
    });
}

在这里使用$observe意味着您的"手表"只受属性更改的影响，如果您直接更改指令中的$scope.collapsable，则不会受到影响。

Answer 2

在设置双向绑定的指令上创建一个作用域：

app.controller('ctrl', function($scope)
{
    $scope.list = {
        name: 'Test',
        collapsed: true,
        items: [1, 2, 3]
    };
});
app.directive('list', function()
{
    return {
        restrict: 'E',
        scope: {
            collapsed: '=',
            name: '=',
            items: '='
        },
        template:
            '<div>' +
                '{{name}} collapsed: {{collapsed}}' +
                '<div ng-show="!collapsed">' +
                    '<div ng-repeat="item in items">Item {{item}}</div>' +
                '</div>' +
                '<br><input type="button" ng-click="collapsed = !collapsed" value="Inside Toggle">' +
            '</div>'
    };
});

然后将选项作为属性传入：

<list items="list.items" name="list.name" collapsed="list.collapsed"></list>

http://jsfiddle.net/aaGhd/3/

Answer 3

不能传递字符串true或false作为属性值，也支持传递范围属性（如list.collapsed）作为双向绑定的属性值。你必须选择其中一种方式。

这是因为在使用隔离作用域时，只能指定一种方法来解释指令中的属性值。

我想你可以在目录中使用=，如果attrs.collapsable设置为true或false，也可以检查链接函数：如果是，那么你知道传递了一个布尔值，如果不是，则使用双向数据绑定。但这太离谱了。

Answer 4

我知道我在这方面晚了一年，但实际上你可以通过使用链接函数来做到这一点(https://docs.angularjs.org/guide/directive)。签名如下：

function link(scope, element, attrs) { ... } 

attrs对象将用传入的原始值填充。因此，您可以说if（attrs.collpsed=='true'）｛…｝或类似的情况。

Answer 5

由于Angular 1.3属性$observe似乎也会触发未定义的属性，所以如果你想解释一个未定义的特性，你需要做一些类似的事情：

link: function(scope, element, attrs) {
    attrs.$observe('collapsable', function() {
      scope.collapsable = scope.$eval(attrs.collapsable);
      if (scope.collapsable === undefined) {
        delete scope.collapsable;
      }
    });
  },