javascript - 向所有 AngularJS Controller 添加方法

Question

我有一个简单的应用程序和几个 Controller 。在每个 Controller 中，我定义了一个“init”函数。我这样做是因为我希望可以轻松“刷新” Controller - 只需调用 init 函数，如下所示:$scope.init()。

换句话说，类似于 .Net 中的 Page_Load 事件(如果您在代码中定义了该函数，它将在页面加载时触发。

我正在尝试使用为每个 Controller 运行的decorator函数，但我不知道如何完成这个任务。

var myApp = angular.module('myApp',[]);

myApp.decorator('$controller', ['$delegate', function ($delegate) {
    return function (constructor, locals) {
        var controller = $delegate.apply(null, arguments);
        // Never got hear
        if (locals.$scope && locals.$scope.init) {
            console.log('init');
            locals.$scope.init();
        }

        return angular.extend(function () {
            return controller();
        }, controller);
    };
}]);

myApp.controller('ctrl1', function($scope) {
  $scope.init = function() {
  	$scope.name = 'Superhero';
  };
  
  // I don't want to call this
  $scope.init();
});

myApp.controller('ctrl2', function($scope) {
  $scope.init = function() {
  	$scope.name = 'Mario';
  };
  
  // I don't want to call this
  $scope.init();
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="ctrl1">
    Hello, {{name}}!
  </div>
  <div ng-controller="ctrl2">
    My name is, {{name}}!
  </div>
</div>

Answer 1

您可以将此函数添加到 Controller 内部的作用域中。所以它会被添加到这一行

return angular.extend(function () {
    return controller(); //here
}, controller);

你可以简单地保存这个值，可以调用它，比如

return angular.extend(function () {
    var c = controller(); //here save controller object

    if (locals.$scope && locals.$scope.init) {
        console.log('init'); 
        locals.$scope.init();
    }

    return c;//return controller;
}, controller);

示例:

var myApp = angular.module('myApp',[]);

myApp.decorator('$controller', ['$delegate', function ($delegate) {
    return function (constructor, locals) {
        var controller = $delegate.apply(null, arguments);

        return angular.extend(function () {

          var c = controller();
          
        // Never got hear
        if (locals.$scope && locals.$scope.init) {
            console.log('init');
            locals.$scope.init();
        }
          
          return c;
        }, controller);
    };
}]);

myApp.controller('ctrl1', function($scope) {
	$scope.init = function() {
  	$scope.name = 'Superhero';
  };
  
});

myApp.controller('ctrl2', function($scope) {
	$scope.init = function() {
  	$scope.name = 'Mario';
  };
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="ctrl1">
    Hello, {{name}}!
  </div>
  <div ng-controller="ctrl2">
    My name is, {{name}}!
  </div>
</div>