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

I'd like to bind/set some boolean attributes to a directive. But I really don't know how to do this and to achieve the following behaviour.

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

Imagine that I want to set a flag to a structure, let's say that a list is collapsable or not. I have the following HTML code:

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

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

items are two-way binded, name is just an attribute

项目是双向绑定的，名称只是一个属性

I'd like that collapsable attribute to be available in the list's $scope either by passing a value (true, false or whatever), either a two-way binding

我希望这个可折叠属性可以通过传递一个值(true、false或其他)在列表的$范围中可用，或者是双向绑定

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

I'm developing some UI components and I'd like to provide multiple way of interacting with them. Maybe, in time, some guys would like to know the state of that component, either is collapsed or not, by passing an object's property to the attribute.

我正在开发一些UI组件，我想提供与它们交互的多种方式。有时，有些人可能想通过将对象的属性传递给属性来知道组件的状态，或者是已折叠或者未折叠。

Is there a way to achieve this? Please correct me if I missunderstood something or I'm wrong.

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

Thanks

谢谢

5 个解决方案

#1

You can configure your own 1-way databinding behavior for booleans like this:

您可以为布尔人配置自己的单向数据库行为，如下所示:

link: function(scope, element, attrs) {

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

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

}

Using $observe here means that your "watch" is only affected by the attribute changing and won't be affected if you were to directly change the $scope.collapsable inside of your directive.

在这里使用$ observer意味着您的“watch”只受属性更改的影响，如果您要直接更改$范围，则不会受到影响。可折叠的内部你的指令。

#2

Create a scope on the directive that sets up bi-directional binding:

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

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>'
    };
});

Then pass the options in as attributes:

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

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

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

#3

You can't pass strings true or false as the attribute value, and also support passing a scope property such as list.collapsed as the attribute value for two-way binding. You have to pick one way or the other.

您不能将字符串true或false传递为属性值，并且支持传递一个范围属性，如list。作为双向绑定的属性值崩溃。你必须选择一种或另一种方式。

This is because you can only specify one way to interpret the attribute's value in your directive when using an isolate scope.

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

I suppose you could use = in your diretive, and also check in your linking function if attrs.collapsable is set to true or false: if so, then you know a boolean value was passed, and if not, use the two-way data binding. But this is hacky.

我想你可以在你的diretive中使用=，并检查你的连接函数if attrs。可折叠性设置为true或false:如果是，那么您知道传递了布尔值，如果不是，则使用双向数据绑定。但这是出租汽车司机。

#4

I know I'm like a year late on this, but you can actually do this by using the link function (https://docs.angularjs.org/guide/directive). The signature looks like this:

我知道我晚了一年，但是你可以通过使用链接函数(https://docs.angularjs.org/guide/directive)来实现。签名如下:

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

That attrs object will be filled out with the raw values passed in. So you could say if (attrs.collapsed == 'true') { ... } or some such.

这个attrs对象将被传入的原始值填充。所以你可以说if (attrs。折叠= 'true'){…}或一些这样的。

#5

Since Angular 1.3 attrs.$observe seems to trigger also for undefined attributes, so if you want to account for an undefined attribute, you need to do something like:

自1.3 attrs角。$ observer似乎也会触发未定义属性，所以如果您想要对未定义属性进行说明，您需要做如下操作:

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

#1