javascript - 无法更新 Service、AngularJS 中的值

Question

我是 AngularJS 的新手，在更新 Service 中的值时遇到一些麻烦，这是我的代码:

JS

(function() {
    'use strict';
    function TestController($scope,$element){
    }
    function InfoController($scope,$element,$http,testService){
        $scope.$watch(function () { return testService.getHandler(); },
            function (value) {
                $scope.sel = value;
                var sel = $scope.sel;
                $http.get('hanlder',{params: {sel:sel}}).success(function(resp) {
                    $scope.data = resp['data'];
                });
            }
        );
    }
    function OptionController($scope,$element,$http,testService){
        var list = $element;
        list.on('click',".list-group-item",function() {
            var sel = $(this).text();
            testService.setHandler(sel);
        });
    }
    function testService() {
        var property = "List";
        return {
            setHandler: function (msg) {
                console.log(msg);  //After click, property == msg
                property = msg;
            },
            getHandler: function () {
                console.log(property); //But property in getHandler doesn't change // != msg
                return property;
            }
        };
    }
    angular.module('testModule', [])
        .service('testService', testService)
        .controller('TestController', TestController)
        .controller('InfoController', InfoController)
        .controller('OptionController', OptionController);
})();

在OptionController中点击“.list-group-item”后，新值sel将发送至testService.setHandler (==msg)，并更改值 property在 testService 中，因此 getHanler 将返回新值，InfoController 将具有新值 sel 。

但是，在实际应用中，property在getHanlder没有改变，InfoController 无法获取新值 sel运行$http.get() 。请帮我解决这个问题:)

这是我的 html:

<section ng-app = "testModule" ng-cotroller="TestController" class="main-content">
  <div class="row ">
    <div class="col-md-6 col-md-offset-1 list-group" ng-controller="InfoController">
      <div class="list-group-item list-group-item-info" ng-show="sel">{{sel}}
      </div>

      <!--Before click-->
      <div class="list-group-item" ng-if="sel == 'List'">Choose one in right!</div>

      <!--After click-->
      <div class="list-group-item sel-dat" ng-repeat="dat in data track by $index" ng-if="sel != 'List'">
        <h4>Name: {{dat.name}}</h4>
      </div>

    </div>
    <div class="col-md-3 col-md-offset-1 list-group aa" ng-controller="OptionController">
      <div class="list-group-item">Users</div>
      <div class="list-group-item">Kinds</div>
    </div>
  </div>
</section>

Answer 1

我第一眼看不出你的具体问题，但你的服务并没有什么问题。您应该做的第一件事是从 Controller 中删除 use $element ，因为这不是您应该编写 Angular 的方式。

我写了一个小 fiddle 来实现您想要的服务功能。您的代码有两个主要区别。

第一个是将服务数据包装在一个状态中。这样可以更轻松地在服务外部进行绑定(bind)和操作，并保护您的实际服务状态根对象。

第二个方法是删除 $element 的任何使用，并利用 ng-click 来管理 Controller 内的点击响应。 Angular 的一般规则是不要访问 Controller 内的 DOM。

fiddle :

http://jsfiddle.net/fjnuemj6/

HTML:

<div>
    <div class="col-md-6 col-md-offset-1 list-group" ng-controller="MainController">

    <div class="selected">{{state.prop || 'Not Selected'}}</div>

    <div class="option-list">
      <div class="list-group-item" ng-click="changeType('Users')">Users</div>
      <div class="list-group-item" ng-click="changeType('Kinds')">Kinds</div>
    </div>    
</div>

JS:

angular.module('myApp', [])

.controller('MainController', function($scope, testService){
    $scope.state = testService.getState();

    $scope.changeType = function(type){
        testService.setProp(type);   
    }
})

.service('testService', function(){
    var state = {};

    return {
        getState: function(){ return state; },
        setProp: function(prop){ state.prop = prop; }
    };
});