javascript - 从 AngularJS 中的“父”控制器调用指令 API 方法

Question

我有一种情况，我想创建自定义组件，它应该是可重用的，并提供公共 API 来改变它的状态。我试图通过使用指令和控制器构建组件来实现这一点。

我想做的只是：

customComponent.apiMethod1( Math.floor( Math.random() * 2 ) );

这是JSFiddle，它应该解释我的情况： //jsfiddle.net/7d7ad/4/

在第 9 行（当用户单击按钮时），我想调用第 22 行方法（自定义组件公共 API 方法）。有没有办法做到这一点？

Answer 1

您正在寻找Providers。共有三种不同的类型：工厂、服务和提供者。每个都有点不同，你可以看看这个总结。

提供者可以让您在应用程序的不同区域之间共享常用方法、函数和数据，而无需重复代码。

简短的例子-小提琴

html

<div ng-app="myApp" ng-controller="testController">
    <button ng-click="ClickMe()">Random</button>
    {{display.value}}
</div>

javascript

angular.module('myApp', [])
.controller('testController', ['$scope','myService', function($scope, myService) {
    $scope.display =new myService();

    $scope.ClickMe = function() {
        $scope.display.apiMethod1();
    };
}])
.factory('myService', function() {
     function factory() {
          this.value = "Hello World";

          this.apiMethod1 = function() {
               this.value =  Math.floor( Math.random() * 2 );
          };
      }
      return factory;
});

Answer 2

除了服务之外，您还可以将父指令与控制器一起使用。

这是一个如何工作的示例（底部的服务示例）：

app.directive('parentDir', function() {
    return {
        controller: function($scope, $element) {
            var childFuns = [];
            this.registerFun = function(func) {
                childFuns.push(func);
            }
            //we will call this using ng-click
            $scope.onClick = function(){
                childFuns.forEach(function(func){
                   func.call(null,5)
                });
            }
        }
    }
})

在子指令中：

app.directive('customcomp', function() {
    return {
        restrict: 'E',
        scope: {},
        require: '^parentDir', //we "require" the parent directive's controller,
                               //which makes angular send it as the fourth
                               //argument to the linking function.
        template: '<h2>{{_currentNumber}}</h2>',
        link: function(scope, elm, attrs, ctrl) {
            scope._currentNumber = 0;
            scope.apiMethod1 = function(val) {
                scope._currentNumber = val;
            };
            //call the parent controller's registring function with the function
            ctrl.registerFun(scope.apiMethod1);
        }
    }
});

每个子指令都会“注册”一个函数，并且可以以任何您想要的方式从父指令存储和调用这些函数。

请注意，您应该使用ng-click带角度的事件。

小提琴

以下是服务的外观：

app.service('funcs', function(){
    var funcs = [];
    this.register = function(func){ funcs.push(func)};   
    this.call = function(){
        funcs.forEach(function(func){
            func.call(null,5);
        })
    }
})

小提琴