Как получить доступ к изолированной $ -области в клиенте AngularJS директива без удаленного шаблона

Question

Как получить изолированную область действия, действующую в рамках директивы клиента, которая не имеет удаленного шаблона?

Для меня не работает следующее.

AnularJS

app.directive('emanForm', ['$http', 'db', function ($http, db) { 
    return { 

     scope: { }, 

     link: function ($scope, element, attrs) { 

      $scope.message = 'test'; 

     } 

    }; 
}]); 

HTML

<form name="form_1" eman-form="form1"> 
    {{ message }} 
</form> 

в $ сфера кажется, будет доступна только тогда, когда я включаю удаленный шаблон. templateUrl: 'view.html' и т. Д.

Answer 1

Вопрос здесь не в удаленных и локальных шаблонах, а скорее в выражении в дочернем DOM и в шаблоне.

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

Таким образом, {{message}} будет оцениваться по охвату родителя.

Чтобы «довести эти элементы в рамки» требует использования $compile:

link: function(scope, element){ 
    $compile(element.contents())(scope); 
} 

EDIT:

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

Чтобы избежать этого, ручной подход был бы к $compile и удалить содержимое элемента в compile функции директивы, а затем связать скомпилированные содержимое и добавить/добавить их к элементу в функции link.

Вместо этого Угловой обеспечивает затвор. Когда transclude: true (или transclude: 'element'), содержимое скомпилируется один раз, и клон переведенного содержимого, привязанный к области, заданной функцией transclude, доступен для размещения в любом месте.

transclude: 'element', 
link: function(scope, element, attrs, ctrls, transcludeFn){ 
    // bind to the directive's scope 
    transcludeFn(scope, function(clone){ 
    // element here is the comment element left after transclusion 
    element.after(clone); 
    });