директивы с изолированной сферы:... Как избежать $ родителя $ родителя $ родителя $ parent.foo

Question

трогании от «Как создать директивы, которые обмениваются данными» из angularJS руководства, https://docs.angularjs.org/guide/directive,

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

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

<div id="showfoo">Foo = {{foo}}</div> 

<form-tabs> 
    <form-tab> 
    <input ng-model="$parent.$parent.$parent.$parent.foo" /> 
    </form-tab> 
    <form-tab> 
    <input ng-model="$parent.$parent.$parent.$parent.foo" /> 
    </form-tab> 
    <form-tab> 
    <input ng-model="$parent.$parent.$parent.$parent.foo" /> 
    </form-tab> 
</form-tabs> 

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

Вопрос в том, как этого избежать? В идеале я хотел бы сделать <input ng-model="foo">, и обновить его div#showfoo

См. http://plnkr.co/edit/jgD7a6W53518qpyLNUcx?p=preview для получения полного кода.

Answer 1

Прежде всего - Старайтесь избегать использования нг-модели на не элемента объекта: http://nathanleclaire.com/blog/2014/04/19/5-angularjs-antipatterns-and-pitfalls/

Во-вторых - Вы можете попробовать с обслуживанием (выглядит менее красиво), или использовать новую модель http://toddmotto.com/no-scope-soup-bind-to-controller-angularjs/, где вы можете просто продолжайте пользоваться областью наследования.

Answer 2

Вы можете использовать синтаксис controllerAs в директивах так же, как вы можете, с помощью обычных контроллеров.

http://blog.thoughtram.io/angularjs/2015/01/02/exploring-angular-1.3-bindToController.html

Answer 3

Использование изолированной сферы не всегда необходимо, но если вы действительно должны, вы также можете отправить свой foo объект, как вы отправите title.

scope: { 
    title: '@', 
    foo: '=' 
    } 

И в HTML:

Foo = {{foo.x}} 

<my-tabs> 
<my-pane title="Hello" foo="foo"> 
    <input ng-model="foo.x"></input> 
    <h4>Hello</h4> 
    <p>Lorem ipsum dolor sit amet</p> 
</my-pane> 

Вы также должны инициализировать foo объект для того, чтобы передать свою ссылку, в этом конкретном примере это на $rootScope. You can check it here