• angularjs学习第八天笔记(指令作用域研究)


    您好,在前两天对指令的简单了解和系统指令学习后

    今天主要研究其指针作用域的相关事情

      每一个指令在创建时,其实就构成了自己的一个小的模块单元。

    其对于的模块单元都有着其对于的作用域,其中作用域一般有两种情况:

    其一、继承父级作用域;其二、自己完全独立开辟一个新的作用域。

    angularjs其作用域通过scope来实现,其取值有三种情况:true、false、{}

    其默认值是false:学习也就针对这3种情况进行研究

    其一、scope=false

      和父级完全共用一个作用域

    其二、scope=true

      创建了一个新的 作用域,初始化时继承父作用域

      表现形式:当子作用域属性值不改变一直使用父作用域对应的属性值

      一旦子作用域的属性值发生改变,就在受父作用域影响

      但是:这一切的前提是:数值是值类型(字符串、布尔、数值)

      也就是说:当数值为应用类型(obj)时其实和

    为了直观的体现两种的差异,下面进行一个练习:

      

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body ng-app="myApp" ng-controller="myContro">
        父(字符串):{{message}}<br />
        <input type="text" ng-model="message" /><br />
        名字(对象):<input type="text" ng-model="user.name" /><br />
        <div style="auto;border-bottom:2px solid #000000">
            <h4>scope=true:创建了一个新的 作用域,初始化时继承父作用域</h4>
        </div>
        <div my-direct>
            孩(字符串):{{message}}<br />
            <input type="text" ng-model="message" /><br />
            名字(对象):<input type="text" ng-model="user.name" /><br />
        </div>
        <div style="auto;border-bottom:2px solid #000000">
            <h4>scope=false:和父级完全共用一个作用域</h4>
        </div>
        <div my-direct>
            孩(字符串):{{message}}<br />
            <input type="text" ng-model="message" /><br />
            名字(对象):<input type="text" ng-model="user.name" /><br />
        </div>
        <div style="auto;border-bottom:2px solid #000000">
        </div>
        <h4>小结</h4>
        scope=true:创建了一个新的 作用域,初始化时继承父作用域<br />
        <div style="margin-left:100px;">
            表现形式:当子作用域属性值不改变一直使用父作用域对应的属性值<br />
            一旦子作用域的属性值发生改变,就在受父作用域影响<br />
            但是:这一切的前提是:数值是值类型(字符串、布尔、数值)<br />
            也就是说:当数值为应用类型(obj)时其实和<br />
        </div>
        scope=false:和父级完全共用一个作用域<br />
    
    </body>
    </html>
    <script src="Scripts/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module("myApp", []);
    
        app.controller("myContro", function ($scope) {
            $scope.message = "im father message";
            $scope.user = {
                name: "father"
            }
        });
    
        app.directive("myDirect", function () {
            return {
                restrict: "A",
                replace: true,
                scope: true
            };
        });
    
        app.directive("myDirect2", function () {
            return {
                restrict: "A",
                replace: true,
                scope: false
            };
        });
    </script>
      
      
      

      

  • 相关阅读:
    2020.9.21
    企业应用架构模式003——对象-关系结构模式
    企业应用架构模式002
    企业应用架构模式001
    代码大全003/
    代码大全002/
    每日总结
    数论必刷题
    Tarjan求割点(割顶) 割边(桥)
    Luogu 2018 秋令营 Test 2
  • 原文地址:https://www.cnblogs.com/xiaoXuZhi/p/angularjs_scope001.html
Copyright © 2020-2023  润新知