zoukankan      html  css  js  c++  java
  • 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>
      
      
      

      

  • 相关阅读:
    ORM
    数据库事务课上代码
    数据存储——SQLite数据库存储——API
    事务的ACID特性
    数据库练习3
    数据存储——SQLite数据库存储——SQL语句——DML数据操作语言、内置函数聚合函数
    数据库练习2
    数据存储——SQLite数据库存储——SQL语句——DQL数据查询语言
    数据库练习
    《那些事之Log4j》什么是log4j?【专题一】
  • 原文地址:https://www.cnblogs.com/xiaoXuZhi/p/angularjs_scope001.html
Copyright © 2011-2022 走看看