Question

我在指令栏中有一个指令Foo我试图在Foo中调用一个函数

但它不起作用。

示例小提琴已创建。

angular.module('ui', []).directive('uiFoo',
function() {
    return {
        restrict: 'E',
        template: '<p>Foo</p>',
        link: function($scope, element, attrs) {
            $scope.message = function() {
                alert(1);
            };
        },
        controller: function($scope) {
            this.message = function() {
                alert("Foo Function!");
            }
        }
    };
}
).directive('uiBar',
function() {
    return {
        restrict: 'E',
        template: '<button ng-click="callFunction()">Bar</button> <ui-foo></ui-foo>',
        require: 'uiFoo',
        scope: true,
        link: function($scope, element, attrs, uiFooController) {
            $scope.callFunction = function() {
                alert('Bar Function');
                uiFooController.message();
            }

        }
    };
}
);angular.module('myApp', ['ui']);

用户界面看起来像这样的

 <div ng-app="myApp">  <ui-bar>  </ui-bar></div>

Answer 1

您遗漏了以下错误消息：

无法找到指令'uiBar'所需的控制器'uiFoo'！

问题是需求层次结构搜索树而不是向下搜索树。因此，ui-bar正在尝试在其中一个祖先中找到一个uiFoo指令控制器，或者（使用^符号），而不是其中一个孩子。

如果要从子指令调用方法，只需使用范围：http://jsfiddle.net/4d9Lfo95/5/

angular.module('ui', []).directive('uiFoo',
  function() {
    return {
      restrict: 'E',
      template: '<p>Foo</p>',
      controller: function($scope) {
        $scope.message = function() {
          alert("Foo Function!");
        }
      }
    };
  }
).directive('uiBar',
  function() {
    return {
      restrict: 'E',
      template: '<button ng-click="callFunction()">Bar</button> <ui-foo></ui-foo>',
      scope: true,
      controller: function($scope) {
        $scope.callFunction = function() {
          alert('Bar Function');
          $scope.message();
        }

      }
    };
  }
);

嵌套指令之间的通信无效

1 个答案: