2013-12-08 3 views
1

HTML-код выглядит следующим образомЯвляются ли областями внутри каждой независимой директивы изолированной и частной внутри этой директивы?

<div class="dir-view" > 
    // unable to get {{ button.content }} 
    <button type="button" id="notworking" ng-show="button.content.length" >{{ button.content }}</button> 

</div> 
<div class="dir-design" > 
    //able to get {{ button.content }} 
    <button type="button" id="working" ng-show="button.content.length" >{{ button.content }}</button> 
    <div class="control-group"> 
     <label class="label label-primary" for="button-content">BUTTON CONTENT :</label> 
     <div class="controls"> 
      <textarea class="form-control" id="button-content" rows="4" cols="50" ng-model="button.content"></textarea> 
     </div> 
    </div> 
</div> 

В приведенном выше коде дир ракурс и реж-дизайн являются пользовательскими директивами я определен.

В теге кнопки в div # dir-view Я не могу получить {{button.content}}.

тогда как в div # dir-design я могу получить {{button.content}}.

Я думаю, что объект области в директиве dir-design недоступен в dir-view.

Является ли причина, по которой я не могу получить доступ {{button.content}} Внутренний dir-view.

Являются ли областями внутри каждой директивы изолированными и частными директивами?.

Если я прав, может кто-то пожалуйста, руководство меня в решении этой проблемы, сделав {{}} button.content одной директивы дир-дизайн, доступный даже в дир-зрения (то есть соседняя директива).

Также, если возможно, пожалуйста, направьте меня на хороший документ по угловым областям js.

крепление экрана области действия я получил от угловой отладки хром плагина enter image description here

Моего controller.js содержимое файла с указанием директивой

angular.module('modFoundation', ['$strap.directives']) 
    //directive to include view panel 
    .directive('dirView', function() { 
     return { 
      restrict : 'CAME', 
      templateUrl: 'templates/view.html', 
      transclude: true 
     }; 
    }) 
    //directive to include design panel 
    .directive('dirDesign', function() { 
     return { 
      restrict : 'CAME', 
      templateUrl: 'templates/design.html', 
      transclude: true 
     }; 
    }) 
+0

Ваш вопрос содержит много, но это не совсем понятно, что ваша цель это ИМО.Если бы вы могли опубликовать plunkr или jsfiddle, чтобы показать проблему в действии, это помогло бы ... Из того, что ваше описание, похожее на то, что вы хотите использовать, требует в объекте определения директивы доступа к контроллеру одной директивы от другого или, возможно, вам будет выгодно использовать сервис или ценность для обмена некоторыми данными между директивами. – shaunhusain

+0

k я придумаю plunkr –

+0

Да будет смотреть этот учебник .. –

ответ

0

, как я сделал две директивы общается?

Концепция: Две директивы были братьями и сестрами. Существует новая область, созданная для каждой директивы, которая хорошо видна на диаграмме. Таким образом, чтобы эти две связи были связаны с внедрением сервиса и введением каждой директивы, но это устраняет необходимость использования этих директив и создает сильную зависимость между ними. поэтому мы должны найти способ сделать это, не влияя на повторное использование.

Как это братья и сестры, идея будет сделать общение возможно через родителей, так что просто ввести контроллер, который просто делает

$ scope.button = {}

Готово.

Чтобы понять идею коммуникации между двумя детьми, следующий код будет полезен.

> $scope 
Scope {$id: "002", $$childTail: Child, $$childHead: Child, $$prevSibling: null, $$nextSibling: null…} 

> child1 = $scope.$new() 
Child {$id: "005", this: Child, $$listeners: Object, $parent: Scope, $$asyncQueue: Array[0]…} 

> child2 = $scope.$new() 
Child {$id: "006", this: Child, $$listeners: Object, $parent: Scope, $$asyncQueue: Array[0]…} 

> child1.$parent 
Scope {$id: "002", $$childTail: Child, $$childHead: Child, $$prevSibling: null, $$nextSibling: null…} 

> child2.$parent 
Scope {$id: "002", $$childTail: Child, $$childHead: Child, $$prevSibling: null, $$nextSibling: null…} 

> $scope.button = {} 
Object {} 

> child1.button 
Object {} 

> child2.button 
Object {} 

> child1.button.c1v1 = "hello" 
"hello" 

> child2.button.c1v1 
"hello" 

> child2.button.c2v2 = "world" 
"world" 

> child2.button.c2v2 
"world" 

> $scope.button.c1v1 
"hello" 

> $scope.button.c2v2 
"world" 





      $scope 
       | 
    _________|___________ 
    |      | 
    |      | 
    child1    child2 

Прецедент объясняется в jsfiddle

не работает при: http://plnkr.co/edit/OoAuHzP8YW8NXk8I5qtc?p=preview

работая случай: http://plnkr.co/edit/bx4vBavcfwQYyeJqEkfU?p=preview

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