angularjs学习第八天笔记（指令作用域研究）

时间：2025-03-26 23:04:49

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

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

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

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

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

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="width: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="width: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="width: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>
　　
　　
　　

　　

相关文章