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>

在声音按钮指令中，$ 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（点击按钮，然后点击显示的文字）

AngularJS：ng-transclude in directive并将事件发送给parent

1 个答案: