31

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

想象一下，我想为一个结构设置一个标志，假设一个列表是否可折叠。我有以下 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 组件，我想提供多种与它们交互的方式。也许，随着时间的推移，有些人想通过将对象的属性传递给属性来了解该组件的状态，无论是折叠还是未折叠。

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

谢谢

4

5 回答 5

26

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

link: function(scope, element, attrs) {

    attrs.$observe('collapsable', function() {

        scope.collapsable = scope.$eval(attrs.collabsable);
    });

}

在此处使用 $observe 意味着您的“监视”仅受属性更改的影响，如果您直接更改指令中的 $scope.collapsable 则不会受到影响。

于 2014-07-18T13:56:55.757 回答
8

在设置双向绑定的指令上创建一个范围：

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/

于 2013-08-02T11:50:16.583 回答
5

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

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

我想你可以在你的指令中使用，如果设置为or =，还可以检查你的链接函数：如果是这样，那么你知道传递了一个布尔值，如果没有，则使用双向数据绑定。但这是骇人听闻的。attrs.collapsabletruefalse

于 2013-08-02T13:43:07.103 回答
2

我知道我在这方面迟到了一年，但您实际上可以通过使用链接功能（https://docs.angularjs.org/guide/directive）来做到这一点。签名如下所示：

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

该 attrs 对象将用传入的原始值填充。所以你可以说 if (attrs.collapsed == 'true') { ... } 或类似的。

于 2014-06-25T22:50:51.817 回答
2

由于 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;
      }
    });
  },
于 2015-01-30T09:21:00.370 回答