Как связать логические значения в директивах angular?

Я хотел бы привязать/установить некоторые логические атрибуты в директиве. Но я действительно не знаю, как это сделать и для достижения следующего поведения.

Представьте, что я хочу установить флаг в структуру, скажем, что список разворачивается или нет. У меня есть следующий код 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>

Я разрабатываю некоторые компоненты пользовательского интерфейса, и я хотел бы предоставить несколько способов взаимодействия с ними. Может быть, со временем некоторые парни хотели бы знать состояние этого компонента, либо рушится, либо нет, передав свойство объекта атрибуту.

Есть ли способ достичь этого? Пожалуйста, поправьте меня, если я пропущу что-то или я ошибаюсь.

Спасибо

Ответ 1

Вы можете настроить свой собственный режим однонаправленной привязки данных для булевых элементов следующим образом:

link: function(scope, element, attrs) {

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

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

}

Использование $observ здесь означает, что ваш "чат" влияет только на изменение атрибута и не будет затронут, если вы должны напрямую изменить $scope.collapsable внутри своей директивы.

Ответ 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/

Ответ 3

Вы не можете передавать строки true или false в качестве значения атрибута, а также поддерживать передачу свойства scope, такого как list.collapsed, в качестве значения атрибута для двусторонней привязки. Вы должны выбирать так или иначе.

Это связано с тем, что вы можете указать только один способ интерпретации значения атрибута в вашей директиве при использовании области выделения.

Я полагаю, вы могли бы использовать = в своем директиве, а также проверить свою функцию привязки, если attrs.collapsable установлено на true или false: если это так, то вы знаете, что было получено логическое значение, и если нет, используйте двустороннюю привязку данных. Но это хакки.

Ответ 4

Я знаю, что я как год опаздываю на это, но вы действительно можете это сделать, используя функцию ссылки (https://docs.angularjs.org/guide/directive), Подпись выглядит следующим образом:

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

Этот объект attrs будет заполнен исходными значениями, переданными в. Таким образом, вы можете сказать, что (attrs.collapsed == 'true') {...} или некоторые из них.

Ответ 5

Так как Angular 1.3 attrs. $наблюдать, похоже, срабатывает также для атрибутов undefined, поэтому, если вы хотите учесть атрибут undefined, вам нужно сделать что-то вроде:

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