AngularJS：指令中的 ng-transclude 并向父级发送事件

Question

我有这样的自定义指令：

<fold fold-name="Musique et sons">
    <sound-button height=60  song-name="Why Make..."></sound-button>
</fold>

fold 指令有这样的模板：

<button class="fold" ng-click="showMe = !showMe">{{foldName}} ({{nb}})</button>
<div class="fold" ng-transclude ng-show="showMe"></div>

在声音按钮控制器中，我必须这样做：

$scope.$parent.$$prevSibling.$emit('foldstop')

如果我希望控制器接收事件：

      $scope.$on 'foldplay', (sender, evt) ->

发生了什么： 创建 3 个作用域：

 <fold> Scope
 <ng-transclude scope> which has no model, thus no controller.
      <sound-button scope> 

在 sound-button 指令中，$scope.$emit 会命中 ng-transclude 范围，它是我想要命中的范围的兄弟。

所以我使用 $scope.$parent.$prevSibling 来点击正确的控制器。 可以，但是有更好的方法吗？

谢谢！

Answer 1

如果你的指令相关，你可以试试require。

app.directive('soundButton', function() {
    return {
      restrict: 'E',
      scope: {
        songName: '@'
      },
      require:"^fold", 
      link : function (scope,element,attrs,foldController){//inject fold controller 
           foldController.callFold("message"); //use the controller to communicate
      }
    };
});

app.directive('fold', function() {
    return {
      restrict: 'E',
      scope: {
        foldName: '@'
      },
      templateUrl: 'fold.html',
      transclude:true,

      controller:function(){ //declare the controller to be used by child directives.
          this.callFold = function (message){
            alert(message);
          }
      }
    };
});

DEMO

您不能使用$scope.$emit，因为您的指令范围没有父/子关系。您可以参考this discussion了解更多信息。

更新：

如果您的指令不相关并且您需要有父/子关系，您可以尝试自定义嵌入：

app.directive('fold', function() {
    return {
      restrict: 'E',
      scope: {
        foldName: '@'
      },
      templateUrl: 'fold.html',
      transclude:true,

      compile: function (element, attr, linker) {
          return {
           pre: function (scope, element, attr) {
             linker(scope, function(clone){ //bind the scope your self
                 element.children().eq(1).append(clone); // add to DOM
             });
           },
           post: function postLink(scope, iElement, iAttrs) {  
               scope.$on("foldplay",function(event,data){
                 alert(data);
               });
            }
          };
      }
    };
});

DEMO（点击按钮，然后点击显示的文字）