CODEWITHSUNDEEP
javascripthtmlangularjscontroller
javaMan
javaMan

Reputation: 6680

Using ng-controller twice on dom elements in Angular

I have to use same controller on two dom elements. I learned that using ng-controller on two elements will instantiate two instances. I have to share a variable between those two instances. So what I did is I created a service and assigned watch in my controller to observe that variable present in my service.

But I don't see the second controller getting updated.

Below is the jsfiddle link I tried to get it to work.

http://jsfiddle.net/jnj6y/251/

JS code:

var myModule = angular.module('myModule', []);
myModule.controller('mainCtrler',function($scope){
              // $scope.dummy="main" 
                });
myModule.controller('SFCtrler',function($scope,highlightService) {
$scope.dummy="hi";
 $scope.submit = function(){
     highlightService.setDummy("howdy");
        $scope.dummy=highlightService.getDummy();
    };
$scope.$watch(function () {highlightService.getDummy(); },function(newVal, oldVal) { 
        alert(highlightService.getDummy());
        $scope.dummy=highlightService.getDummy();   
        },
        true);  
    });
myModule.service('highlightService', function() {
var dummy ='default';
var setDummy = function(input){
    dummy = input;
}
var getDummy = function(){
    return dummy;
}
 return {       
      setDummy: setDummy,
      getDummy: getDummy    
};
});

HTML code:

<div ng-controller="mainCtrler">
<div ng-controller="SFCtrler" > 
     <p>{{dummy}}</p>
            <form id='sf' ng-submit="submit();" >
                <input ng-model="SearchTerm" placeholder="Search current record"  type="text" >
            </form>
        </div>   
<div ng-controller="SFCtrler" > 
<p>{{dummy}}</p>                
        </div>   
</div>

Can you guys point what I am missing.

Upvotes: 0

Views: 205

Answers (2)

Lauwrentius
Lauwrentius

Reputation: 503

I've updated your jsfiddle: http://jsfiddle.net/zwa3s77c/ You don't want to have a primitive variables as a scope variables.

var myModule = angular.module('myModule', []);
myModule.controller('mainCtrler',function($scope){
});

myModule.controller('SFCtrler',function($scope,highlightService) {
    $scope.dummy={val: "hi"};
    $scope.submit = function(){
        highlightService.setDummy("howdy");
        $scope.dummy=highlightService.getDummy();
    };

    $scope.$watch(function () {
        highlightService.getDummy();
        }, function(newVal, oldVal) { 
            alert(highlightService.getDummy().val);
            $scope.dummy=highlightService.getDummy();   
        }, true);  
});
myModule.service('highlightService', function() {
    var dummy ={val:'default'};
    var setDummy = function(input){
        dummy.val = input;
    }
    var getDummy = function(){
        return dummy;
    }
     return {       
          setDummy: setDummy,
          getDummy: getDummy    
    };
});

Here' more for reference: http://www.codelord.net/2014/05/10/understanding-angulars-magic-dont-bind-to-primitives/

Upvotes: 1

Josh Beam
Josh Beam

Reputation: 19772

function () {highlightService.getDummy(); } should be:

function() {
  return highlightService.getDummy();
}

It needs to return a value to $scope.$watch.

Full updated watcher code:

$scope.$watch(function () {

  return highlightService.getDummy();

}, function(newVal, oldVal) { 

  $scope.dummy = newVal;  

}, true);

Upvotes: 2

Related Questions