javascript - 如何在 AngularJS 中实现 Controller 特征

Question

我想授予一组 Controller 访问特征中定义的方法和属性的权限。现在我想出的最好的实现是:

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

app.controller('MainCtrl', function($scope, CtrlTrait) {
  $scope.name = CtrlTrait.presetName;
  CtrlTrait.setGreeting.call($scope, 'Hello');
});

app.service('CtrlTrait', function() {
  this.setGreeting = function(greeting) { this.greeting = greeting; }
  this.presetName = 'tom';
});

Plunkr Code

这很好，但我希望可以通过 Controller 的 $scope 访问属性和方法，而不必在每个 Controller 中手动创建别名。我希望能够通过将服务注入(inject) Controller 来使用模板中的属性和方法。

这可能吗，还是我必须创建一个 [wrapper around]/[provider for] $scope 像 $specialCtrlScope 来预设我想要的属性和方法？

Answer 1

您可以像这样尝试使用 angular.extend:angular.extend($scope,CtrlTrait); 它允许我们在 $scope 中使用 与您的服务相同的功能。因此，您可以像这样在 html 中直接使用该函数:

 <button ng-click="setGreeting('Good bye! ')">Good Bye</button>

这是您改编的 plunker 演示:

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

app.controller('MainCtrl', function($scope, CtrlTrait) {
  $scope.name = CtrlTrait.presetName;
 // CtrlTrait.setGreeting.call($scope, 'Hello');
  angular.extend($scope,CtrlTrait);
  $scope.setGreeting('Hello World');
});

app.service('CtrlTrait', function() {
  this.setGreeting = function(greeting) { this.greeting = greeting; }
  this.presetName = 'tom';
});

http://plnkr.co/edit/BENS78mjFfpc6VCEtgK8?p=preview