Добавление $properties в Transcluded Scope

Когда мы не указываем ни scope:true (новая область действия), ни scope:{} (изолированная область действия) и когда мы повторно используем директиву, свойства, определенные в области действия, будут переопределены.

Для примера:

<div ng-controller="AppCtrl">
    <my-control name="myControl1">
        Some Content: {{value}} 
        My Control Name: {{name}}
    </my-control>
    <my-control name="myControl2">
        Some Content: {{value}} 
        My Control Name: {{name}}
    </my-control>
</div>

Вместо того, чтобы печатать на экране как myControl1, так и myControl2, он будет печатать myControl2 два раза.

Plnkr

Чтобы решить эту проблему, попробуйте любое из следующих решений.

Решение 1

transclde:true создаст новый Scope. установите свойства в этой области вместо области действия директивы.

app.directive('myControl', function() { 
  return {
    restrict: 'E',
    transclude: true,
    template: '<div><p><strong>Welcome to the testMe directive!</strong></p> <div ng-transclude></div></div>',
    link: function(scope, element, attrs) {
      var transclusionTarget = element[0].querySelector('[ng-transclude]').firstChild;
      var transclusionScope = angular.element(transclusionTarget).scope();
      transclusionScope.name = attrs.name;
    }
  }
});

здесь элемент под ng-transclude div будет скомпилирован с transclusionScope, захватите его и обновите в нем свойства.

Plnkr

Решение 2 Вместо использования ng-transclude включите контент вручную.

app.directive('myControl', function() {  
  return {
    restrict: 'E',
    transclude: true,
    template: '<div><p><strong>Welcome to the testMe directive!</strong></p> <div transclude-target></div></div>',
    link: function(scope, element, attrs, directiveCtrl, transcludeFn ) {

      var transclusionScope = scope.$new(),
          transclusionTarget = element[0].querySelector('[transclude-target]');

      transclusionScope.name = attrs.name;

      transcludeFn(transclusionScope, function (clone) {
        angular.element(transclusionTarget).append(clone);
      });
    }
  }
});

Здесь создайте new Scope, расширяющий область действия директивы, используя scope.$new(). И обновить свойства в нем.

Plnkr

Решение 1 может работать не во всех случаях. К тому времени, когда мы получим доступ к firstChild, и если оно не будет готово, Solution1 завершится ошибкой.

Решение 2 чище и будет работать во всех случаях.

Вы можете прикрепить новые методы к своей области действия в своей функции связывания директив (или даже в контроллере вашей директивы, если он у вас есть).

Для простоты я покажу здесь, как присоединить новый метод к функции связывания директивы:

app.directive('myControl', function() {
    return {
        restrict: 'E',
        transclude: true,
        template: '<div ng-transclude></div>',
        link: function postLink(scope) {
            scope.$close = function close() {
                console.log("Close function that lives in directive...");
            };
        }
    };
});

В вашем HTML вы должны просто вызвать эту функцию:

<my-control>
    Click <a href ng-click="$close();">close</a> things.
</mycontrol>

Также не забудьте проверить этот плункер с приведенным выше примером, работающим на практике: http://plnkr.co/edit/SPSFGcB49qXmXROmNeHj?p=preview

Я надеюсь, что это поможет, и не стесняйтесь, дайте мне знать, если я что-то пропустил, и я буду рад включить любую дополнительную информацию.

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

«Угловой» способ предоставления API директивы — через контроллер. Я бы следовал шаблону, который использует директива ngForm:

Что-то вроде этого:

app.directive('myControl', function() {  
  return {
    restrict: 'E',
    transclude: true,
    controller: function($scope) {
        this.$close = function(){
            //close me
        }
        this.$open = function() {
            //open me
        }

    }
    template: '<div><p><strong>Welcome to the testMe directive!</strong></p> <div transclude-target></div></div>',
    link: function(scope, element, attrs, directiveCtrl, transcludeFn ) {

      transcludeFn(scope.$new(), function (clone, transclusionScope) {
         //only expose the API to the scope if the name attribute is present
          if(attrs.name) {
              transclusionScope[name] = directiveCtrl;
          }
          angular.element(element[0].querySelector('[transclude-target]').append(clone);
      });
    }
  }
});

С использованием:

 <my-control name="myControl2">
    <button ng-click="myControl2.$close()>Close</button>
 </my-control>