将服务变量绑定到控制器 AngularJS答案

【问题标题】：Binding Service Variable To Controller AngularJS将服务变量绑定到控制器 AngularJS
【发布时间】：2016-09-22 20:35:00
【问题描述】：

http://jsfiddle.net/9hazjjcc/

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

function MyCtrl($scope, myService) {
    $scope.targetMode = myService.targetMode; 
    $scope.myService = myService;
}

myApp.service('myService', function() {
    this.targetMode = 2;
});

function ctrlTwo($scope, myService) {
    $scope.addToTargetMode = function() {
    myService.targetMode++;
 }
}

HTML：

<div ng-controller="MyCtrl">
  <p>Hello, {{ targetMode }}!</p>
  <p>Hello, {{ myService.targetMode }}!</p>
</div>

<div ng-controller="ctrlTwo">
  <button ng-click="addToTargetMode()">
    Add To Target Mode
  </button>
</div>

这个 JSFiddle 说了大部分。我想在控制器中使用服务变量来操纵视图，但我不想将整个服务暴露给控制器，因为这看起来不太像 Angular。或者这被认为是最佳做法？

理想情况下，第一段会更新以显示服务中的 targetMode 变量，只要它发生变化。

【问题讨论】：

标签： javascript angularjs service controller

【解决方案1】：

你的方式还不错，如果你的服务是为了管理“目标模式”而创建的，你可以使用那种方式，但我认为与其公开this.targetMode = 2，这就是服务功能，你可以使用服务就像一个模型模式，在你的服务中你可以做这样的事情：

myApp.service('myService', function() {
    var targetMode = 2;

    return {
        getTargetMode: function() { return targetMode; }
});

您可以在您的服务中混合私有功能，只公开公共等。

但是，在我看来，由于 targetMode 的上下文，我认为最好是一个控制器变量（我的意思是范围变量），正如你所知，服务不被注入一个范围，它们不作为一个范围循环的一部分，并且您在模板中使用此变量，所以我认为您想要角度“绑定”，因此最好使用范围变量并在控制器中声明（可能在自定义指令中取决于每种情况）。这是角度方式。如果你使用服务（非作用域变量），你可以在控制器中手动观察它，或者你可以使用函数作为观察者，但使用作用域变量更有效。

问题是，您用于绑定的 $scope 变量：$scope.addToTargetMode，被声明为一个函数，对，它是正确的，因为您需要转到服务，在摘要循环中这效率较低直接使用控制器中的值。让我解释一下，在所有的摘要周期中，angular 都会执行你的函数。因此，如果您直接使用范围变量（忘记服务），摘要循环将不会是一个额外的调用，因为范围有“他自己的伟大管理”。 Angular 自己监视范围变量：对象、字符串、数字、数组，如果它发生变化并且你什么都不做，它会做“改变”！但是对于范围函数变量，角度魔法效果最差，因为在所有摘要中循环这个函数将被计算。

所以，你总是会使用一个变量来绑定，在控制器中思考，例如，如果你需要从 bbdd 或其他什么获取数据，服务会很好。当然，这仅适用于您使用 Angular 1.X.X，Angular 2 是其他历史

【讨论】：