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

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

新老客户大回馈,云服务器低至5折

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

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

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>

好了,时间不早了,周五早点休息

通过最近学习,感觉进度很慢,后续加快学习步骤

明天继续学习指令的其他属性

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:编写高性能React组件-传值篇

下一篇:高德地图排雷指南(一)--点标记,信息窗体