Question

我有一个父指令和一个子指令，所有在控制器中，视图在这里：

<body ng-app="myApp">
  <section ng-controller="TestController">
     <section parent-directive parentFn="callback">
       <child-directive>
         <button ng-click="save()">save</button>
       </child-directive>
     </section>
  </section>
</body>

我想访问在TestController中定义但传递给parentDirective然后传递给childDirective的回调函数。

我的js代码：

var myModule = angular.module('myApp', []);
myModule.controller('TestController', function($scope) {

  $scope.callback = function(){
    console.log('callback invoked');
  };
});


myModule.directive('parentDirective',function(){
    return {
    restrict: 'EA',
    scope: {
        parentFn: '&'
    },
    controller: function($scope){
        this.parentFn = $scope.parentFn;
    }
  }
});

myModule.directive('childDirective',function(){
    return {
    restrict: 'EA',
    require: '?^parentDirective',
    transclude: true,
    template: '<div ng-transclude></div>',
    link: function(scope, element, attrs, controller){
        console.log("child:c:%o",controller);
        scope.save = function(){
        console.log('save fn invoked');
        console.log('is parentFn type:%o',typeof controller.parentFn);
        controller.parentFn();
      }
    }
  }
});

这是一个jsfiddle： https://jsfiddle.net/savokiss/j6gp720c/

当我点击按钮时，callback invoked没有出现在我的控制台中。

为什么？

Answer 1

你没有正确地传递指令元素中的函数，指令属性名称应该是小的情况，然后大写应该用带有前缀连字符的小案例转换。像这里parentFn应该是parent-fn，然后它的值应该有方法调用。

 <section parent-directive parent-fn="callback()">
   <child-directive>
     <button ng-click="save()">save</button>
   </child-directive>
 </section>

Fiddle

如何访问从父指令传递但在控制器中定义的子指令中的函数？

1 个答案: