AngularJS：使服务状态可观察

Question

I have a directive for a filter object. The directive represents the filter as group of comboboxes. And I have a couple of another directives that should be affected by changes in the filter state (a list, for example). So when I change the value of a combobox in the filter it should update the property of the filter. Then somehow other directives should be informed that filter has been changed and update accordingly after that. For now I have a simple service for storing the filter state:

angular.module("services", []).factory("svcFilter", function(){
    var filter = {};

    return filter;
});

This service is injected in the filter directive. When value of a combobox in the filter directive changed filter state changed:

angular.module("filter-module", ["services"])
    .directive("filter", function(){
        return {
            restrict: "E",
            templateUrl: "path/to/filter/template.html",
            controller: function($scope, svcFilter){
                ...
                $scope.$watch("filterProp1", function(newValue){
                    svcFilter["filterProp1"] = newValue;    
                });
            }
        }
    });

where filterProp1 is bound to the combobox value.

So far so good. I can inject this service into other directives and they will be having the access to the filter state but will be never notified about its changes. How to solve it? How to notify others about the changes?

Answer 1

I worked off of @sss fiddle to amend it for isolate scope - fiddle

template: "<select ng-model='isolateProp1' ng-change='onChange()'>  <option value='volvo'>Volvo</option>  <option value='saab'>Saab</option>  </select> ",

controller: function ($scope, svcFilter) {
    $scope.svcfltr = svcFilter; // <-- this line seems to be making the difference

    $scope.$watch("svcfltr.filterProp1", function () {
        $scope.isolateProp1 = svcFilter.filterProp1;
    });

    $scope.onChange = function(){
        svcFilter.filterProp1 = $scope.isolateProp1;
    };
}

EDIT:

Another approach is to directly assign a to-be-observed property of the service to a property of $scope :

$scope.isolateProp = svcFilter.filterProp;

Then, $scope.$watch is not even needed if you're using isolateProp as an expression in the view: {{isolateScope}} or ng-model="isolateScope" .