Can't update values in Service, AngularJS

Question

I'm new in AngularJS, and I have some trouble to update values in Service, Here is my code:

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);
})();

After click ".list-group-item" in OptionController, new value sel will be send to testService.setHandler (==msg), and change value property in testService, so getHanler will return new value and InfoController will have new value sel.

But, in real app, property in getHanlder doesn't change, and InfoController can't get new value sel to run $http.get(). Please, help me to fix that:)

Here my 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>

Matt Way · Accepted Answer · 2015-08-10 02:42:00Z

1

I cannot see your exact problem at first glance, but it isn't anything wrong with your service. The first thing you should do is remove the use $element from your controllers, as that is not the way you should be writing angular.

I have written a small fiddle that achieves your desired service functionality. There are two main differences to your code.

The first is wrapping your service data in a state. This allows for easier binding and manipulating outside of your service, as well as protecting your actual service state root object.

The second is by removing any use of $element, and utilising ng-click to manage your click response inside your controllers. A general rule of angular is to not access the DOM inside a controller.

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; }
    };
});

answered Aug 10, 2015 at 2:42

Matt Way

33.3k10 gold badges85 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dung Nguyen quang Over a year ago

It work when I change .click funtion to ng-click. Your answer relly helpful!! Thank you so much :)

Collectives™ on Stack Overflow

Can't update values in Service, AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related