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的值分配给scope变量时，您将创建变量的副本，该变量是SomeService内部值的不同对象。通过添加监视表达式，您只需将两个变量（范围中的一个和SomeService中的变量）保持同步。

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

$scope.someService = SomeService;

并在你的HTML中

Value: {{someService.value}}

这样你就实际上绑定了SomeService中的值。

AngularJS：观看服务属性

1 个答案: