zoukankan      html  css  js  c++  java
  • 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 时也经常出问题。
    二、解决的办法 (子和父都用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>
  • 相关阅读:
    如何在IntelJ下用Maven创建一个Web项目
    Sublime快捷键大全
    Oracle常用数据字典
    POI 操作Excel疑难点笔记
    Oracle常见错误集锦
    SQL注入测试平台 SQLol -6.CHALLENGES挑战
    SQL注入测试平台 SQLol -5.DELETE注入测试
    SQL注入测试平台 SQLol -4.UPDATE注入测试
    SQL注入测试平台 SQLol -3.INSERT注入测试
    SQL注入测试平台 SQLol -2.SELECT注入测试
  • 原文地址:https://www.cnblogs.com/yuzhongwusan/p/5337889.html
Copyright © 2011-2022 走看看