CODEWITHSUNDEEP
javascriptangularjs
Navaneet
Navaneet

Reputation: 1387

Update ng-model of first controller on click of button from another controller

I have a angularjs application in which i have two controllers. I need to set or update ng-model of first controller input field by using ng-click of a button in second controller. Since $scope of 1st controller not accessible from 2nd controller ,it can be done using $scope. I tried using $rootScope . Here is example fiddle.

var myApp = angular.module('myApp',[]);
function MyCtrl1($scope, $rootScope) {
    $rootScope.name = 'anonymous'; 
}

function MyCtrl2($scope, $rootScope) {
 $scope.myclick = function()
 {
    $rootScope.name = "myname";
 }
}

html code

<div ng-controller="MyCtrl1">
  <input type="text" ng-model="name" ng-change="ontxtchange(name)"></input>
</div>
<div ng-controller="MyCtrl2">

  <button ng-click="myclick()">click</button>
</div>

If i click on button ng-model gets updated.But if i do any change to the textbox before clicking button then $rootScope will not update the ng-model. So how it can be solved?

Upvotes: 0

Views: 920

Answers (3)

ssuperczynski
ssuperczynski

Reputation: 3416

Remove $rootScope use normal $scope and then inject new service to each controller.

    (function () {
    'use strict';
    angular
        .module('myApp', [])
        .controller('MyCtrl1', MyCtrl1);

    MyCtrl1.$inject = ['service'];

    function MyCtrl1($scope, service) {

        $scope.name = service.myScope;
    }
})();
(function () {
    'use strict';
    angular
        .module('myApp', [])
        .controller('MyCtrl2', MyCtrl2);

    MyCtrl2.$inject = ['service'];

    function MyCtrl2($scope, service) {

        $scope.myclick = function () {
            service.myclick();
        };
    }
})();


(function () {
    'use strict';

    angular
        .module('myApp')
        .service('service', service);

    service.$inject = [''];

    function service() {

        var self = this;

        self.myScope = 'anonymous';
        self.myclick = function () {
            self.myScope = 'myname';
        };

        return self;

    }

})();

Upvotes: 1

biancamihai
biancamihai

Reputation: 981

You can use $broadcast or $emit to depending on the relations between your controllers.

If you will use $broadcast you will have something like this in your second controller:

$scope.myclick = function(){
    $rootScope.$broadcast('eventName', 'myname');
})

And in your first controller:

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

OR using $emit:

$scope.myclick = function(){
    $rootScope.$emit('eventName', 'myname');
})

And in your first controller:

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

$broadcast -- dispatches the event downwards to all children

$emit -- dispatches the event upwards

In case there is no relation between your controllers you can use $rootScope and $broadcast and in your second controller it will look like this:

 $rootScope.$broadcast('eventName', value);

and in your first controller:

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

Upvotes: 1

Alcadur
Alcadur

Reputation: 685

You should use service for that, simple shared values with service

JS:

angular.module("app",[])
.controller("ctrl1", ["$scope", "commonValues", function($scope, commonValues){
  $scope.commonValues = commonValues;  
}])
.controller("ctrl2", ["$scope", "commonValues",function($scope, commonValues){  
  $scope.changeValue = function(){
    commonValues.testValue="value change";
  }
}])
.service("commonValues", [function(){
  this.testValue = "test";
}]);

HTML:

<div ng-app="app">
  <div ng-controller="ctrl1">{{commonValues.testValue}}</div>
  <div ng-controller="ctrl2">
    <button ng-click="changeValue()">Change</button>
  </div>
</div>

http://codepen.io/anon/pen/PqVbYy

Upvotes: 1

Related Questions