angularjs - Accessing inherited scope with Controller As approach -
with original way define controllers, accessing parent's scope trivial, since kid scope prototypically inherits parent.
app.controller("parentctrl", function($scope){ $scope.name = "parent"; }) .controller("childctrl", function($scope){ $scope.childname = "child of " + $scope.name; }); <div ng-controller="parentctrl"> {{name}} <div ng-controller="childctrl"> {{childname}} </div> </div> the controller-as approach seems recommended way declare controller. controller-as, above approach no longer works.
sure, can access parent scope pc.name view:
<div ng-controller="parentctrl pc"> {{pc.name}} <div ng-controller="childctrl cc"> {{cc.childname}} </div> </div> i have issues (potential spaghetti code), question accessing parent scope kid controller.
the way can see working is:
app.controller("parentctrl", function(){ this.name = "parent"; }) .controller("childctrl", function($scope){ $scope.pc.name = "child of " + $scope.name; // or $scope.$parent.pc.name = "child of " + $scope.name; // there's no $scope.name // , no $scope.$parent.name }); so now, kid controller needs know "pc" - except, should (in mind) restricted view. don't think kid controller should know fact view decided declare ng-controller="parentctrl pc".
q: what's right approach then?
edit:
clarification: i'm not looking inherit parent controller. looking inherit/change shared scope. so, if amend first example, should able following:
app.controller("parentctrl", function($scope){ $scope.someobj = {prop: "not set"}; }) .controller("childctrl", function($scope){ $scope.someobj.prop = "changed"; });
after researching, came next realization:
controller-as approach not substitute using $scope. both have place, , can/should used judiciously.
$scope name implies: i.e. defines viewmodel properties on $scope. works best sharing scope nested controllers can utilize $scope drive own logic or alter it. controler-as defines entire controller object viewmodel named scope (via controller's alias). works best in view (but not other controllers), if view decides if wants reference specific controller viewmodel. here's example:
class="snippet-code-js lang-js prettyprint-override">var app = angular.module('myapp', []); // controllers take whether want modify inherited scope or not: app.controller("parentctrl", function($scope) { this.prop1 = { v: "prop1 parentctrl" }; $scope.prop1 = { v: "defined on scope parentctrl" }; }) .controller("child1ctrl", function($scope) {}) .controller("child2ctrl", function($scope) { // here, don't know "pc" alias this.myprop = $scope.prop1.v + ", , changed child2ctrl"; }); class="snippet-code-html lang-html prettyprint-override"><script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script> <body ng-app="myapp"> <div ng-controller="parentctrl pc"> <div ng-controller="child1ctrl"> <div>i know "pc" alias: {{pc.prop1.v}}</div> </div> <div ng-controller="child2ctrl ch2"> <div>i care own viewmodel: {{ch2.myprop}}</div> </div> </div>
angularjs angularjs-scope angularjs-controller
No comments:
Post a Comment