将 $properties 添加到 Transcluded 范围

Question

我有一个嵌入范围的指令，如下所示：

<my-control>
    Some Content: {{value}}
</my-control>

value 来自父作用域。

我想添加一个与控件范围交互的函数，所以我可以这样做：

<my-control>
    Some Content: {{value}}
    <button ng-click="$close()">Close</button>
</my-control>

类似于ngRepeat 将$index 等属性添加到行范围的方式。在我的指令中执行此操作的最简单方法是什么？

Answer 1

您可以在指令链接函数中将新方法附加到您的作用域（如果您有的话，甚至可以在指令的控制器中）。

为了简单起见，我将在这里展示如何将新方法附加到指令的链接函数：

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>

还想通过上面的例子来看看这个 plunker 在实践中的工作： http://plnkr.co/edit/SPSFGcB49qXmXROmNeHj?p=preview

我希望这会有所帮助，如果我遗漏了任何内容，请随时告诉我，我很乐意提供任何其他信息。

Answer 2

当我们没有指定 scope:true(new Scope) 或 scope:{} (isolatedScope) 时，当我们重新使用该指令时，在作用域上定义的属性将被覆盖。

例如：

<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 将创建一个新的作用域。在这个范围而不是指令的范围上设置属性。

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

Solution1 可能并不适用于所有情况。当我们访问firstChild 时，如果它还没有准备好Solution1 将失败。

Solution2 更简洁，适用于所有情况。

Answer 3

Vinay 的回答是正确的，但我会对其进行修改以使其更“有角度”

公开指令 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>