AngularJS : 观看服务属性

Question

以下面的代码为例：

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 个控制器和一个服务，1 个控制器 (SecondaryCtrl) 更新服务上的属性，另一个控制器 (MainCtrl) 引用此属性并显示它。

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

Answer 1

当您将 SomeService.value 的值分配给范围变量时，您正在创建该变量的副本，该副本是与 SomeService 中的值不同的对象。通过添加 watch 表达式，您只需保持两个变量（一个在范围内，一个在 SomeService 中）同步。

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

$scope.someService = SomeService;

在你的 html

Value: {{someService.value}}

通过这种方式，您实际上是在绑定到 SomeService 中的值。

AngularJS : 观看服务属性

AngularJS : watching Service properties

javascript

angularjs

angularjs-service

angularjs-controller