angularjs - 如何在 angularjs 中用 2 个相同的 Controller 制作原型(prototype)？

Question

在我的应用程序中，我有 2 个几乎相同的 Controller 。很多功能都是一样的，所以我想制作它们的原型(prototype)。这是 Controller #1:

c2gcontroller.js

angular.module('c2gyoApp')
  .controller('C2gCtrl', function($scope) {
    // some unique stuff
    $scope.feeDay = 59;
    ...
    // the identical functions
    $scope.getMinutes = function(minutes) {
      var duration = moment.duration(minutes, 'm');
      return duration.minutes();
    };
    ...
  });

和 Controller ＃2:

c2gbcontroller.js

angular.module('c2gyoApp')
  .controller('C2gbCtrl', function($scope) {
    // some unique stuff
    $scope.feeDay = 89;
    ...
    // the identical functions
    $scope.getMinutes = function(minutes) {
      var duration = moment.duration(minutes, 'm');
      return duration.minutes();
    };
    ...
  });

我试过把 $scope.getMinutes进厂:

smfactory.js

angular.module('c2gyoApp')
  .factory('smfactory', function() {
    return {
      getHours: function(minutes) {
        var duration = moment.duration(minutes, 'm');
        return Math.ceil(duration.asHours() % 24);
      }
    };
  });

我注入(inject)了 smfactory进入 c2gcontroller.js

c2gcontroller.js(尝试#1)

angular.module('c2gyoApp')
  .controller('C2gCtrl', function($scope, smfactory) {
    ...
    // the identical functions
    $scope.getHours = smfactory.getHours(minutes);
    ...
  });

这会产生一个错误，即分钟未定义

 line 33  col 42  'minutes' is not defined.

所以我尝试了:

c2gcontroller.js(尝试#2)

angular.module('c2gyoApp')
  .controller('C2gCtrl', function($scope, smfactory) {
    ...
    // the identical functions
    $scope.getMinutes = function(minutes) {
      return smfactory.getHours(minutes);
    };
    ...
  });

这不会产生错误，但我的应用程序确实变得无响应。基本上 $scope.getMinutes现在不返回任何东西。

我已经阅读并观看了很多关于 AngularJS 服务、工厂、提供者的信息，但我不知道从这里去哪里。原型(prototype) c2gcontroller.js 的正确方法是什么？和 c2gbcontroller.js ?

Answer 1

这是结合使用 JavaScript 的强大功能和 controller as 的地方。语法真的很方便。

如果我们将您的常用功能提取到一个普通的旧对象中:

var commonStuff = {
   getHours: function(minutes) {
        var duration = moment.duration(minutes, 'm');
        return Math.ceil(duration.asHours() % 24);
   }
};

然后，如果我们将 Controller 重构为普通的 JS 对象，我们可以使用两种方法之一的 mixin 来扩充它。要么直接到对象本身，要么通过原型(prototype)。

//Using the instance
function MyCtrl(){
   var vm = this;

   angular.extend(vm, commonStuff);

   //Other stuff
}

//Or via the prototype
function MyCtrl(){
   var vm = this;
}

//Controller specific
MyCtrl.prototype = {

};

angular.extend(MyCtrl.prototype, commonStuff);

最大的不同是现在您可以直接通过使用 controller as 来引用 Controller 。句法。

<div ng-controller="myCtrl as ctrl">
  <a href="" ng-click="ctrl.getHours(120)">Get Hours</a>
</div>