Как установить параметры области действия с изолированной сферой

Question

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

После того, как изолированная сфера создаются для директивы я думал, что вы можете установить любые данные области (в данном случае greeting) в функции controller или link. Но ссылка {{greeting}} в HTML не работает, хотя greeting отображается в области при проверке через консоль?

Я думал, что новая изолированная область будет назначена директиве myDir, и все, что определено в этой области, будет доступно в содержимом HTML <my-dir>. Очевидно, у меня есть разрыв в понимании.

Любые идеи, пожалуйста?

Plunker: here

HTML:

<my-dir> 
    Greeting: {{greeting}} 
</my-dir> 

JS:

var app = angular.module('myApp', []); 

app.directive('myDir', function() { 

    return { 
     restrict: 'EA', 
     scope: {}, 
     controller: ['$scope', function ($scope) { 

      $scope.greeting = 'Hello'; 
      //this.greeting = 'Hello'; 

     }], 
     link: function(scope, element, attrs){ 

      //scope.greeting = 'Hello'; 

     } 

    }; 
}) 

Answer 1

заменить scope: {} с

scope: false, 

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

Answer 2

Кажется, что это работает. Кто-нибудь видит какие-то недостатки?

Таким образом, внутри функции link, передать параметр transclude, затем установите scope для включены через элемент, таким образом:

app.directive('myDir', function() { 
    return { 
     restrict: 'EA', 
     scope: {}, 
     controller: ['$scope', function ($scope) { 

      $scope.greeting = 'Hello'; 

     }], 
     link: function(scope, element, attrs, ctrl, transclude){ 

      transclude(scope, function(clone) { 
       element.append(clone); 
      }); 

     }, 
     transclude: true 
    }; 
}) 

Answer 3

Обратитесь к docs here - Creating a Directive that Wraps Other Elements:
Этот пример является то, что вы могли бы быть после того, как ,

Для вас также можно использовать ng-transclude, переместите приветствие {{greeting}} в шаблон, который вы определяете в определениях my-dir.

определение Директивы в JS

 app.directive('myDir', function() { 

      return { 
       restrict: 'EA', 
       scope: {}, 
       controller: function ($scope) { 
        $scope.greeting = 'Hello'; 
       }, 
       template: 'Greeting: {{greeting}}', 
       link: function(scope, element, attrs){ 

        //scope.greeting = 'Hello'; 

       } 

      }; 
     }) 

HTML

<my-dir></my-dir> 

вы просто не должны касаться функции связи или сделать что-нибудь из коробка.

Рабочая plunkr: https://plnkr.co/edit/08tFyy?p=preview