angularjs 嵌套控制器,子控制器訪問父控制器

<pre>
http://www.lovelucy.info/understanding-scopes-in-angularjs.html
http://blog.csdn.net/jfkidear/article/details/48463899
http://www.angularjs.cn/A09C

子控制器內如何訪問父控制器中的變量?
若要訪問變量名在子做用域中沒有,那麼$scope.aaa會找到父中進行訪問。

在 AJS 裏 子 Scope 會繼承父 Scope 中的對象,但當你對基本數據類型(string, number, boolean)的 雙向數據綁定 時,
就會出現一個問題:
繼承並不像你想象的那樣工做。子 Scope 的屬性隱藏(覆蓋)了父 Scope 中的同名屬性,對子 Scope 屬性(表單元素)的更改並不更新父 Scope 屬性的值。
這個行爲實際上不是 AngularJS 特有的,JavaScript 自己的原型鏈就是這樣工做的。開發者一般都沒有意識到 ng-repeat, ng-switch, ng-view 和 ng-include 通通都建立了他們新的子 scopes,
因此在用到這些 directive 時也常常出問題。
2、解決的辦法 (子和父都用obj,且爲不一樣的obj名字,若爲同樣obj名字,子只會訪問本身的obj,改不了父的obj)
解決的辦法:不使用基本數據類型,而在 Model 裏永遠多加一個點。。
也就是說:子做用域中使用對象+屬性。如 子$scope.obj.a = 父$scope.obj.a
eg:
html: "在子控制器中"
使用 < input ng-model="obj2.pUser"/> 來替代 < input type="text" ng-model="pUser">
ajs:
$scope.obj2={
pUser:$scope.msg.a //$scope.msg在子中無此對象,在父控制器中有。
};

</pre>
<script src="angular-1.3.0.js"></script>
<div ng-controller="OparentController as pCtrl">
    <p>直接訪問父控制器的值:{{user}}</p>
    <div ng-controller="OchildController as cCtrl">
        <p>嵌套如何訪問。。父控制器的值:失敗:<input ng-model="pUser"/>成功:<input ng-model="obj2.pUser"/></p>
        <p>子控制器的值:{{user}}</p>
        <button ng-click="modiV()">clk:子控制器內修改父控制器內(做用域)的值</div>
    </div>
</div>
<script>
    var a10086=angular.module('a10086',[]);
    a10086.controller('OparentController',function($scope){
        $scope.user='parent_李四';
        $scope.msg={a:'parent_李四',b:4,c:[1,34]};
    }).controller('OchildController',function($scope){
        $scope.user='child_張三';
        $scope.pUser=$scope.msg.a;
        $scope.obj2={
            pUser:$scope.msg.a
        };
        $scope.modiV=function(){
            $scope.msg.a="parent_李四 is modify";
            $scope.obj2.pUser="parent_李四 is modify---obj";
            console.log('子控制沒有msg,才順着原型鏈修改了:',$scope.msg, $scope.pUser);
        }
    });
</script>
相關文章
相關標籤/搜索