angularjs - Use scope from multiple controllers on page -
so i've split out ui subcomponents realise 1 of components requires react dropdown change caught parent controller.
i can create shared service variables , have been able inject sub controller can kick off functions but.
how use scope within sub controller?
var ctrl1= $scope.$new(); $controller('ctrl', { $scope: ctrl1}); ctrl1.getdata(); this works fine. can see data coming in console. ui doesnt change. missing?
i've edited post illustrate i'm attempting more clearly.
the drop down on change caught parent controller require child controller run away , data , update ui.
it's attempt split out components. possible? or have split components out far?
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script> <script> angular.module('app2', []) .controller('ctrl2', ['$scope', '$http', function($scope, $http){ $scope.getdata = function(){ $http.post(webserviceurl) .success(function(data){ $scope.app2data = "test2 data"; }); } }]); angular.module('app1', ['app2']) .controller('ctrl1', ['$scope','$controller',function($scope, $controller){ $scope.name = 'controller 1'; //just put in ddp $scope.data = [ {id:1, name: "test"}, {id:2, name: "test2"} ] $scope.makechanged = function(id){ //ddp has changed refresh ui other data in got ctrl2. var cl2 = $scope.$new(); $controller('ctrl2', { $scope: cl2 }); cl2.getdata(); } }]); </script> </head> <body ng-app="app1"> <div ng-controller="ctrl1"> <p>here is: {{name}}</p> <select ng-model="d" ng-options="d dat.name dat in data track dat.id" ng-change="makechanged(d.id)"></select> <div> {{app2data.text}} </div> </div> </body> </html>
for interested here's how got round this.
i created shared service between 2 controllers. , created callback on service. registered call on ctrl2 when shared variable changed controller2 want , scope freshed.
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script> <script> angular.module('app1', ['app2']) .controller('ctrl1', ['$scope', '$controller', 'appointmentsharedproperties', function($scope, appointmentsharedproperties) { $scope.name1 = 'controller 1'; console.log('ctrl1'); //just put in ddp $scope.data = [{ id: 1, name: 'test' }, { id: 2, name: 'test2' }]; $scope.makechanged = function(value) { //ddp has changed refresh ui other data in got ctrl2. appointmentsharedproperties.setdetail(value); console.log('in makechanged: ' + value); } } ]).service('appointmentsharedproperties', function() { var test = ''; var __callback = []; return { getdetail: function() { return test; }, setdetail: function(value) { test = value; if (__callback.length > 0) { angular.foreach(__callback, function(callback) { callback(); }); } }, setcallback: function(callback) { __callback.push(callback); } }; }); angular.module('app2', []) .controller('ctrl2', ['$scope', 'appointmentsharedproperties', function($scope, appointmentsharedproperties) { $scope.name2 = 'controller 2'; console.log('ctrl2'); var getdata = function() { console.log('in getdata'); $scope.app2data = appointmentsharedproperties.getdetail(); } appointmentsharedproperties.setcallback(getdata); } ]); </script> </head> <body ng-app="app1"> <div ng-controller="ctrl1"> <p>here is: {{name1}}</p> <p>here is: {{name2}}</p> <select ng-model="d" ng-options="d dat.name dat in data track dat.id" ng-change="makechanged(d.name)"></select> <div> {{app2data}} </div> </div> </body> </html>
Comments
Post a Comment