Question

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

我想做的只是：

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

这是JSFiddle，它应该解释我的案例：http://jsfiddle.net/7d7ad/4/

在第9行（当用户点击按钮时），我想调用第22行方法（自定义组件公共API方法）。反正有没有实现这个目标？

Answer 1

您正在寻找Providers。有三种不同的类型：工厂，服务和提供商。每个都有点不同，你可以看看this summary。

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

简短示例 - Fiddle

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用于带角度的事件。

FIDDLE

以下是服务的外观：

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

FIDDLE

来自父母的呼叫指令API方法＆＃39; AngularJS中的控制器

2 个答案: