Question

我需要为子指令添加一个回调，这不是一个孤立的范围。我知道您可以使用隔离范围来执行此操作，您也可以使用范围。$ parent来访问它，但如果直接父级是错误的父级，则这并不总是正确的。

myApp.directive('parentDirective', function() {
  return {
    link: function(scope) {
      scope.callback = function(msg) {
       alert(msg);
      }
    }
  }
});

myApp.directive('childDirective', function() {
  return {
    scope: true,
    link: function(scope, element, attrs) {
      var msg = 'from child';
      if (angular.isDefined(attrs.callback)) {
         scope.$parent.$apply(attr.callback);
      }
    }
  }
});

这有效，但我不喜欢它，我讨厌必须手动触发$ apply或$ digest，也讨厌更多尝试访问范围。$ parent，因为这并不总是预期的范围... < / p>

对此有更好的解决方案吗？

Answer 1

问题是隔离范围不是原型继承，如果需要从隔离范围解析为子指令（嵌套），您需要手动转换内容并使用隔离范围作为上下文

var myApp = angular.module('myApp', [])
  .directive('myWrapperDirective', function() {
    return {
      scope: {},
      transclude: true,
      link: function($scope, $element, $attrs, $null, $transclude) {
        $scope.name= 'test';
        $transclude($scope, function(clone) {
          $element.append(clone);
        });
      }
    }
  })
  .directive('myNestedDirective', function() {
    return {
      scope: true,
      link: function($scope, $element, $attrs) {
        // now child directive and parent share same scope.
        console.log($scope.name);
      }
    };
  });

模板：

<div my-wrapper-directive>
  Hello, {{name}}!
  <div my-nested-directive>
    {{name}}
  </div>
</div>

演示：http://jsfiddle.net/xM92P/786/

将回调发送给非隔离范围的子

1 个答案: