Binding not working between components AngularJS
Question
I do have a problem with bindings in AngularJS. I created 2 components (leftForm and rightForm) those components have an input and a p element. This p element is a count number that increases when you click the input button of the other component.
For example I click in leftButton (left component) then the count number in the right button(right component) needs to be incremented, I've accomplished this, but the problem is that I can't see those variables in the view, so I'm guessing I'm doing something wrong with the binding. Here is my code:
angular.module('testApp', []) .controller('Controller', function ($rootScope) { var vm = this; $rootScope.valueLeft = 0; $rootScope.valueRight = 0; vm.rightButton = function () { $rootScope.valueLeft += 1; } vm.leftButton = function () { $rootScope.valueRight += 1; } }) .component('leftForm', { templateUrl: 'leftForm.html', controller: 'Controller', controllerAs: 'vm', bindings: { onUpdate: '&' } }) .component('rightForm', { templateUrl: 'rightForm.html', controller: 'Controller', controllerAs: 'vm', bindings: { onUpdate: '&' } });
<!doctype html> <html ng-app="testApp"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" crossorigin="anonymous"> </head> <body> <div ng-controller="Controller as vm"> <div class="container" style="text-align: center; padding-top: 2%;"> <div class="row" style="padding: 2%; border: 1px solid;"> <div class="col"> <left-form></left-form> </div> <div class="col"></div> <div class="col"> <right-form></right-form> </div> </div> </div> </div> </body> <script type="text/ng-template" id="leftForm.html"> <p>{{$rootScope.valueLeft}}</p> <button ng-click="vm.leftButton()">+1</button> </script> <script type="text/ng-template" id="rightForm.html"> <p>{{$rootScope.valueRight}}</p> <button ng-click="vm.rightButton()">+1</button> </script> </html>
1 answers
solution1
1 ACCPTED 2018-11-07 16:21:25
To access $rootScope variables in your templates you can just use $root as a reference to the $rootScope as {{$root.valueLeft}} and {{$root.valueRight}} . Here is a working example:
angular.module('testApp', []) .controller('Controller', function ($rootScope) { var vm = this; $rootScope.valueLeft = 0; $rootScope.valueRight = 0; vm.rightButton = function () { $rootScope.valueLeft += 1; } vm.leftButton = function () { $rootScope.valueRight += 1; } }) .component('leftForm', { templateUrl: 'leftForm.html', controller: 'Controller', controllerAs: 'vm', bindings: { onUpdate: '&' } }) .component('rightForm', { templateUrl: 'rightForm.html', controller: 'Controller', controllerAs: 'vm', bindings: { onUpdate: '&' } });
<html ng-app="testApp"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" crossorigin="anonymous"> </head> <body> <div ng-controller="Controller as vm"> <div class="container" style="text-align: center; padding-top: 2%;"> <div class="row" style="padding: 2%; border: 1px solid;"> <div class="col"> <left-form></left-form> </div> <div class="col"></div> <div class="col"> <right-form></right-form> </div> </div> </div> </div> </body> <script type="text/ng-template" id="leftForm.html"> <p>{{$root.valueLeft}}</p> <button ng-click="vm.leftButton()">+1</button> </script> <script type="text/ng-template" id="rightForm.html"> <p>{{$root.valueRight}}</p> <button ng-click="vm.rightButton()">+1</button> </script> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.