привязать атрибут к объекту в изолированном объеме

У меня есть директива (с использованием изолированной области), которая использует другую директиву, которая меняет флаг, который мне пришлось поместить в объект-контейнер. Теперь я также хочу установить этот флаг извне. Позвольте мне «нарисовать» это для вас:привязать атрибут к объекту в изолированном объеме

outerScope (outerFlag1 = true, outerFlag2 = true) 
    directiveScope (container.flag1 = false, container.flag2 = false) 
     subdirectiveScope (container.flag1 = false) 
     subdirectiveScope (container.flag2 = false)

Флаг переменные в directiveScope и subdirectiveScope всегда одинаковы, потому что контейнер является образцово по наследству. Теперь я хочу иметь возможность устанавливать его снаружи, чтобы синхронизировать outerFlagX с container.flagX.

С изолированным определения области действия я могу карте свойство, как так:

scope: { 
     outerFlag1: '=flag1' 
     outerFlag2: '=flag2' 
     }

Однако то, что мне нужно, но не допускается является

scope: { 
     outerFlag1: '=container.flag1' 
     outerFlag2: '=container.flag2' 
     }

Как я могу получить это сделано?

Я добавил plunker на основе той, что Микко при условии (спасибо большое): http://plnkr.co/edit/hT6Zip

источник

2014-11-06 Tim-Erwin

Ну, это работает (см. Plunker), просто не используя контейнерный объект. Хотя мне все еще нужно выяснить, почему он по-прежнему не работает в моем коде. –

Ответ на мою проблему состоит из двух частей, которые не совсем очевидны из моего вопроса, поэтому извиняюсь за это.

Просто не используйте контейнерный объект. (см. plunkr in my question)
Хотя это работало в плункере, оно все еще не работало в моем коде. Поэтому я раздели его, пока он не сработал. Вторая проблема заключалась в том, что я использовал подзадачи вместе с ng-if. См modified plunker, где один из использований предлагается следующее: нг-если так:

<sub-directive ng-if="condition" flag="flag2"> </subdirective>

К сожалению (в данном случае), нг-если создает дочерний объем, так что если флаг изменен в под-директиве, он устанавливает собственное свойство в этой дочерней области.Как обычно, это недоступно в родительской области (прототипное наследование). Сначала поставьте флажок в родительском флажке, он работает так, как ожидалось, щелкнув по суб-флажку, он сломает его.

Таким образом, решение состоит в том, чтобы вместо этого использовать ng-show, что не создает другой области.

источник

2014-11-06 13:58:32

Было бы здорово увидеть случай использования в реальной жизни, в виде plunker/скрипкой. Ваша проблема может исчезнуть, не указав изолированную область в вашем подкаталоге.

Учитывая вы следующие controller и два directives

// controller 
app.controller('MainCtrl', function ($scope) { 
    $scope.model = null; 
}); 

// top level directive 
app.directive('oneDirective', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     flag: '=' 
    }, 
    template: '<label for="one">One directive</label><br>' + 
       '<input type="text" name="one" ng-model="flag">' + 
       '<br>' + 
       '<other-directive></other-directive>' 
    }; 
}); 

// nested directive 
app.directive('otherDirective', function() { 
    return { 
    restrict: 'E', 
    template: '<label for="other">Other directive</label><br>' + 
       '<input type="text" name="other" ng-model="flag">' 
    }; 
});

И связанный шаблон HTML

<body ng-controller="MainCtrl"> 
    <h4>Directive scopes</h4> 
    <div> 
    <label for="number">Parent scope</label><br> 
    <input type="text" ng-model="model" placeholder="enter something..." /> 
    <hr> 
    </div> 
    <div> 
    <one-directive flag="model"></one-directive> 
    </div> 
</body>

Это даст вам что-то Лик

imgur

Связанные plunker здесь http://plnkr.co/edit/7XhG8e

источник

2014-11-06 10:22:17

Большое спасибо за ваши усилия. Пример реального мира - это панель, которая может иметь разные состояния и переключатели, которые могут переключаться между этими состояниями. Ваш пример хорош, но отсутствует одна вещь (о которой я не упоминал): Подредактировка используется несколько раз (поэтому я создал ее как директиву). Я думаю об использовании ngModel для поддиалогов. Как вы думаете? (Редактирование: Глупо меня, я уже использую ngModel.) –

Большое спасибо за вашу помощь. Оказалось, очень странное поведение заставило меня проскользнуть через обручи, поэтому я закончил использовать контейнерный объект и ngModel и т. Д. Он работал в некоторой степени, но поднял проблему, которую я описал в вопросе. Если вам интересно о странном поведении: у меня есть ссылка с _ng-click = "flag =! Flag" _. Эта ссылка имеет всплывающую подсказку. Это как-то нарушает оценку ng-click. Я изменил его на _ng-click = "toggle()" _ и переключил флаг в функцию. Это работает. Я не буду исследовать, почему ... –

привязать атрибут к объекту в изолированном объеме

ответ

Смежные вопросы