how to display data in one controller when an click event occurred in other controller?

Question

I'm new to angular.js. I just want to display "Welcome" message which is 'ControllerB' when clicking a button which is in 'ControllerA'. I tried this by using 'service' but I didn't get how to do. Here is my HTML code:

<body ng-app='myApp'>
    <script src="js/angular.js"></script>
    <script src="script/service.js"></script>
    <div ng-controller='contA'>

        <input type="button" ng-click="clicked()" value="Click">

    </div>
    <div ng-controller='contB'>
        <div ng-show="clickShow">
            <h1>Welcome</h1>
        </div>
    </div>
</body>

And my JS code:

var app = angular.module('myApp',[]);

app.controller('contA', ['$scope', 'displayServ', function(scope,displayServ){        
    scope.clicked = function(){
        displayServ.disp = true;            
    }       
}]);

app.controller('contB',['$scope', 'displayServ', function(scope,displayServ){        
    scope.clickShow = displayServ.disp;       
}]);

app.service('displayServ', function(){
    this.disp = false;
});

Possible duplicate of: stackoverflow.com/questions/14502006/…. — Danny Fardy Jhonston Bermúdez
– Danny Fardy Jhonston Bermúdez, Commented Sep 20, 2015 at 16:51

dfsq · Accepted Answer · 2015-09-20 16:48:50Z

You will have to bind to disp property of the service object directly because scope.clickShow is not going to change by itself - there is no connection between service disp and scope clickShow.

So you can expose service object directly into template:

var app = angular.module('myApp',[]);

app.controller('contA', ['$scope', 'displayServ', function(scope,displayServ){        
    scope.clicked = function(){
        displayServ.disp = true;            
    }
}]);

app.controller('contB',['$scope', 'displayServ', function(scope,displayServ){        
    scope.displayServ = displayServ;       
}]);

app.service('displayServ', function(){
    this.disp = false;
});

and in template then:

<body ng-app='myApp'>
    <script src="js/angular.js"></script>
    <script src="script/service.js"></script>
    <div ng-controller='contA'>
        <input type="button" ng-click="clicked()" value="Click">    
    </div>
    <div ng-controller='contB'>
        <div ng-show="displayServ.disp">
            <h1>Welcome</h1>
        </div>
    </div>
</body>

Otherwise you would have to use scope.$watch, but this is not recommend in this case.

Shamal Perera · Accepted Answer · 2015-09-20 16:49:00Z

0

You could use $Broadcast to show the effect in the other controller

answered Sep 20, 2015 at 16:49

Shamal Perera

1,6911 gold badge18 silver badges22 bronze badges

Collectives™ on Stack Overflow

how to display data in one controller when an click event occurred in other controller?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related