首页 > > 网页制作 > Javascript >

angularjs学习第九天笔记（指令作用域【隔离作用…

2018-09-01 05:49:42来源：博客园阅读 ()

您好，昨天学习了指令作用域为布尔型的情况，

今天主要研究其指针作用域为{}的情况

1、当作用域scope为{}时，子作用域完全创建一个独立的作用域，

　　此时，子做预约和外部作用域完全不数据交互

　　但是，在实际应用中，子做作用域也还是要和外部数据交互。　　

　　　　　为止，引入了数据绑定概念

2、隔离作用域数据绑定有三种方式：

　　其一、“@”

　　　　格式为：

　　　　　　scope{

　　　　　　　　属性名称:"@"

　　　　　　}

　　　　子外作用域数据交互表现：

　　　　　　隔离的子作用域和外部作用域实现单向数据绑定，

　　　　　　及外部对应值改变，子作用域值也改变，子作用域值改变父作用域值不改变

　　其二、“=”：

　　　　　格式为：

　　　　　　scope{

　　　　　　　　属性名称:"@"

　　　　　　}

　　　　子外作用域数据交互表现：

　　　　　　隔离的子作用域和外部作用域实现双向数据绑定，

　　　　　　及外部对应值改变，子作用域值也改变，子作用域值改变父作用域值也改变

　　其三、“&”：

　　　　格式为：

　　　　　　scope{

　　　　　　　　属性名称:"&"

　　　　　　}

　　　　子外作用域数据交互表现：

　　　　　　隔离的子作用域和外部作用域实现实现函数交互，

　　　　　　及子作用域可以调用外部作用域函数

下面来一个练习：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body ng-app="myApp" ng-init="message='person infor'" ng-controller="myContro">
    <h4>外部控制器</h4>
    <div>person message:{{message}}</div>
    <input type="text" ng-model="message" />
    <br />
    <br />
    <h4>scope={}时，完全隔离一个子作用域，不能与外部进行数据交互</h4>
    <div my-direct>
    </div>
    <br />
    <br />
    <h4>
        scope={@}时，隔离的子作用域和外部作用域实现单向数据绑定，
        <br />及外部对应值改变，子作用域值也改变，子作用域值改变父作用域值不改变
    </h4>
    <div my-direct2 message="{{message}}">
    </div>
    <br />
    <br />
    <h4>
        scope={=}时，隔离的子作用域和外部作用域实现双向数据绑定，
        <br />及外部对应值改变，子作用域值也改变，子作用域值改变父作用域值也改变
    </h4>
    <div my-direct3 message="message">
    </div>
    <br />
    <br />
    <h4>
        scope={&}时，隔离的子作用域和外部作用域实现实现函数交互，
        <br />及子作用域可以调用外部作用域函数
    </h4>
    <div my-direct4 get-date="getDate()">
    </div>
</body>
</html>
<script src="Scripts/angular.js"></script>
<script type="text/javascript">
    var app = angular.module("myApp", []);

    app.controller("myContro", function ($scope, $filter) {
        $scope.getDate = function () {
            $scope.message = $filter("date")(Date.now(),"yyyy-MM-dd HH:mm:ss");
        }
    });


    app.directive("myDirect", function () {
        return {
            restrict: "A",
            replace: true,
            scope:{},
            template: "<div ng-init=\"message='child infor'\">\
                        child message:{{message}}<br/>\
                       <input type='text' ng-model='message'/></div>"
        }
    });


    app.directive("myDirect2", function () {
        return {
            restrict: "A",
            replace: true,
            scope: {
                message: "@",
            },
            template: "<div ng-init=\"message='child infor'\">\
                        child message:{{message}}<br/>\
                        <input type='text' ng-model='message'/></div>"
        }
    });

    app.directive("myDirect3", function () {
        return {
            restrict: "A",
            replace: true,
            scope: {
                message: "=",
            },
            template: "<div ng-init=\"message='child infor'\">\
                        child message:{{message}}<br/>\
                        <input type='text' ng-model='message'/></div>"
        }
    });

    app.directive("myDirect4", function () {
        return {
            restrict: "A",
            replace: true,
            scope: {
                getDate: "&",
            },
            template: "<div ng-init=\"message='child infor'\">\
                        child message:{{message}}<br/>\
                        <input type='text' ng-model='message'/>\
                        <input type='button' value='获取系统时间'\
                        ng-click='getDate()'/></div>"
        }
    });
</script>