zoukankan      html  css  js  c++  java
  • angularjs学习第九天笔记(指令作用域【隔离作用域】研究)

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

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

    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>

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

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

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

  • 相关阅读:
    TongJI Online Judge预赛(3): Game
    堆栈小应用:配对
    在.net中使用Udp协议创建简单的聊天程序
    TongJI Online Judge预赛(2): LOVE LETTER
    全排列问题之递归求解
    如何打造RSS阅读器
    Html 常用标志总结
    实现页面的分帧显示
    每天OnlineJudge之 “数素数”
    文本编辑器中,如何设计 撤销/重复栈
  • 原文地址:https://www.cnblogs.com/xiaoXuZhi/p/angularjs_directive_learDay4.html
Copyright © 2011-2022 走看看