Question

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

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

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

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

我希望collapsable属性在列表的$ scope中可用，或者传递一个值（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对象将填入传入的原始值。所以你可以说是（attrs.collapsed ==＆＃39; true＆＃39;）{...}或其他一些。

Answer 5

由于Angular 1.3 attrs。$ observe似乎也触发了未定义的属性，所以如果你想要考虑一个未定义的属性，你需要做类似的事情：

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

如何在angular指令中绑定布尔值？

5 个答案: