javascript - AngularJS : watching Service properties

Question

以下面的 plunk 为例:

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

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

app.service('SomeService', ['$rootScope', function ($rootScope) {
    var service = {
        value: false
    }

    return service;
}]);

app.controller('MainCtrl', ['$scope', 'SomeService', function($scope, SomeService) {
    $scope.value = SomeService.value;

    //$scope.$watch(function () { return SomeService.value; }, function (data) { $scope.value = data; });
}]);

app.controller('SecondaryCtrl', ['$scope', 'SomeService', function($scope, SomeService) {
    $scope.toggleValue = function () {
        SomeService.value = !SomeService.value;
    }
}]);

2 个 Controller 和一个服务，1 个 Controller (SecondaryCtrl) 更新服务上的属性，另一个 Controller (MainCtrl) 引用此属性并显示它。

注意 MainCtrl 中注释掉的 $watch 表达式 - 此行未注释，一切都按预期工作，但我的问题 - 有必要吗？ watch 不应该是隐式的还是我做错了什么？

Answer 1

当您将 SomeService.value 的值分配给范围变量时，您正在创建该变量的副本，该副本是与 SomeService 内的值不同的对象。通过添加监视表达式，您只需保持两个变量(作用域中的一个和 SomeService 中的一个)同步即可。

最简单的方法不是复制值，而是创建对服务本身的引用。所以在MainCtrl

$scope.someService = SomeService;

在你的html中

Value: {{someService.value}}

这样您实际上就绑定(bind)到了 SomeService 中的值。