angularjs - How do you set up a relationship between properties of two angular controllers? -
say i've got adamcontroller adam , anujcontroller anuj. want anuj.anujprop have j appended every time adam.adamprop changes.
how done? best way?
here 4 possible ways came with. ranked them in order feel best.
- events - http://plnkr.co/edit/4ad8e47daosuutrphikn?p=preview
- method on factory - http://plnkr.co/edit/vixab8ljdtow5yyfnlmv?p=preview
- factory + $watch - http://plnkr.co/edit/1zvz9edarcgpomzvrjmd?p=preview
- $scope inheritance - http://plnkr.co/edit/3b7tzpi5y4ccwwyxuk25?p=preview
the $scope inheritance approach feels "messy". event driven approach on factory approaches because feel there's sort of overhead associated factories, , if it's going used 1 purpose, overhead isn't worth it. plus, seems events for. put (2) ahead of (3) because $watch hurts performance.
- events
angular .module('app', []) .controller('adamcontroller', adamcontroller) .controller('anujcontroller', anujcontroller) ; function adamcontroller($rootscope) { var vm = this; vm.prop = 'adam'; vm.update = function() { $rootscope.$broadcast('propchange'); }; } function anujcontroller($scope) { var vm = this; vm.prop = ''; $scope.$on('propchange', function(event) { event.currentscope.anuj.prop += 'x'; }); }<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <!doctype html> <html ng-app='app'> <head> <script data-require="angular.js@1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body> <div ng-controller='adamcontroller adam'> <input ng-model='adam.prop' ng-change='adam.update()'> </div> <div ng-controller='anujcontroller anuj'> <p>{{ anuj.prop }}</p> </div> </body> </html>- method on factory
angular .module('app', []) .factory('factory', factory) .controller('adamcontroller', adamcontroller) .controller('anujcontroller', anujcontroller) ; function factory() { return { anujprop: 'anuj', update: function() { this.anujprop += 'j'; } }; } function adamcontroller(factory) { var vm = this; vm.factory = factory; } function anujcontroller(factory) { var vm = this; vm.factory = factory; }<!doctype html> <html ng-app='app'> <head> <script data-require="angular.js@1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body> <div ng-controller='adamcontroller adam'> <input ng-model='initial' ng-change='adam.factory.update()'> </div> <div ng-controller='anujcontroller anuj'> <p>{{ anuj.factory.anujprop }}</p> </div> </body> </html>- factory + $watch
angular .module('app', []) .factory('factory', factory) .controller('adamcontroller', adamcontroller) .controller('anujcontroller', anujcontroller) ; function factory() { return { shared: 'shared', related: 'related' }; } function adamcontroller(factory) { var vm = this; vm.factory = factory; } function anujcontroller(factory, $scope) { var vm = this; vm.factory = factory; $scope.$watch('anuj.factory.related', function(newvalue, oldvalue, scope) { scope.anuj.factory.related = newvalue.touppercase(); }); }<!doctype html> <html ng-app='app'> <head> <script data-require="angular.js@1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body> <div ng-controller='adamcontroller adam'> <input ng-model='adam.factory.shared'> <input ng-model='adam.factory.related'> </div> <div ng-controller='anujcontroller anuj'> <p>{{ anuj.factory.shared }}</p> <p>{{ anuj.factory.related }}</p> </div> </body> </html>- $scope inheritance
angular .module('app', []) .controller('adamcontroller', adamcontroller) .controller('anujcontroller', anujcontroller) ; function adamcontroller($scope) { var vm = this; vm.adamprop = 'adam'; vm.update = function() { var anuj = $scope.$parent.$$childtail.anuj; anuj.anujprop += 'j'; }; } function anujcontroller() { var vm = this; vm.anujprop = 'anuj'; }<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <!doctype html> <html ng-app="app"> <head> <script data-require="angular.js@1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body> <div ng-controller="adamcontroller adam"> <input ng-model="adam.adamprop" ng-change="adam.update()" /> </div> <div ng-controller="anujcontroller anuj"> <p>{{ anuj.anujprop }}</p> </div> </body> </html>
Comments
Post a Comment