angularJs1.x學習——指令（directive）之scope

阿新 • • 發佈：2019-01-21

scope 指令的作用域

可選，預設是false
false: 使用父作用域，指令中對屬性的修改，會直接作用到父級作用域中
true: 從父作用域繼承，並建立一個新的作用域物件，指令中可以訪問父級的作用域，修改不會影響到父級
{}: 建立一個隔離作用域，不能訪問父級的作用域，修改也不會影響到父級

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scope</title>
    <link 
 type="text/css" rel="stylesheet" href="">
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller='MainController'>
    父親: {{name}}
    <input 
 ng-model="name" />
    <div my-directive></div>
    <br />
    <input type="text" ng-model="color" placeholder="Enter a color"/>
    <hello-world></hello-world>
</div>
<script>
    angular.module('myApp',[])
        .controller('MainController',['$scope' 
,function ($scope) {
            $scope.name='哈士奇'
        }])
        .directive('myDirective',function () {
            return {
                restrict:'EA',
                scope:false,
                //兒子繼承父親的值，改變父親的值，兒子的值也隨之變化，反之亦如此。（繼承不隔離）
                /*scope:true,*/
                //兒子繼承父親的值，改變父親的值，兒子的值隨之變化，但是改變兒子的值，父親的值不變。（繼承隔離）
                /*scope:{},*/
                //沒有繼承父親的值，所以兒子的值為空，改變任何一方的值均不能影響另一方的值。（不繼承隔離）
                template:'<div>兒子:{{ name }}<input ng-model="name"/></div>'
            }
        })
        .directive('helloWorld',function () {
            return{
                restrict:'EA',
                replace:true,
                template:'<p style="background-color:{{color}}">Hello World</p>'
            }
        })
</script>
</body>
</html>

隔離作用域的繫結策略

@： 本地作用域屬性 ，使用@符號將子級作用域同DOM屬性的值進行繫結。子級作用域可以
    使用父級作用域的變數，但內部作用域的變數改變，不會影響外部作用域的繫結變數， 
    即單向繫結。   ***注意繫結的方式{{變數}}***
=： 雙向繫結：通過=可以將子級作用域上的屬性同父級作用域上的屬性進行雙向的資料繫結。
    就像普通的資料繫結一樣，子級作用域上會屬性變數變化會引起父級作用域上資料模型中的改變，
    即雙向繫結。 ***注意繫結的方式{{變數}}***
& 與父級的方法繫結

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scope</title>
    <link type="text/css" rel="stylesheet" href="">

</head>
<body ng-app="myApp">
<div>
    <input type="text" ng-model="color1" placeholder="Enter a color1"/>
    <hello-world1 color-attr='{{color1}}'></hello-world1>
    <!--注意這裡設定了color-attr屬性，{{color}}-->
    這是'@'繫結:    {{color1}}
    <br />
    <br />
    <br />
    <input type="text" ng-model='color' placeholder="Enter a color2"/>
    <hello-world2 color-attr='color2'></hello-world2>
    <!--注意這裡設定了color-attr屬性，color2-->
    這是'='繫結:    {{color2}}
</div>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script>
    var app = angular.module('myApp', []);
    app.directive('helloWorld1', function () {
        return {
            restrict: 'EA',
            replace: true,
            scope: {
                color1: '@colorAttr' 
                //指明瞭隔離作用域中的屬性color1應該繫結到屬性colorAttr
                //單向繫結
            },
            template: '<input type="text" ng-model="color1"></div></div>'
        }
    });
    app.directive('helloWorld2', function () {
        return {
            restrict: 'EA',
            replace: true,
            scope: {
                color2: '=colorAttr' 
                //指明瞭隔離作用域中的屬性color2應該繫結到屬性colorAttr
                //雙向繫結
            },
            template: '<div style="background-color:{{color2}}">Hello World<div>
            <input type="text" ng-model="color2"></div></div>'
        }
    });
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scope</title>
    <link type="text/css" rel="stylesheet" href="">

</head>
<body ng-app="myApp">
<div ng-controller='MainController'>
    <input type="text" ng-model="name" placeholder="Enter a color"/>
    {{name}}
    <hello-world saysomething999="say();" name="AAA"></hello-world> //注意這裡
</div>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script>
    var app = angular.module('myApp',[]);
    app.controller('MainController',function($scope){
        $scope.say = function(){
            alert('hello');
        };
        $scope.name = 'leifeng';
    });
    app.directive('helloWorld',function(){
        return {
            scope:{
                saysomething:'&saysomething999',//繫結父級的方法
                name:'@'//單向0繫結父級的name
            },
            restrict: 'AE',
            replace: true,
            template: '<button type="button" ng-bind="name" ng-init="saysomething();"></button>'
        }
    });
</script>
</body>
</html>

angularJs1.x學習——指令（directive）之scope

scope 指令的作用域可選，預設是false false: 使用父作用域，指令中對屬性的修改，會直接作用到父級作用域中 true: 從父作用域繼承，並建立一個新的作用域物件，指令中可

cocos2D-X原始碼分析之從cocos2D-X學習OpenGL（20）----模型，網格和材質

openGL在cocos2d-x中的應用點，呼叫的api基本已經介紹的差不多了，這一篇介紹一些3d遊戲中的概念，它們也和底層有一些關係，也是遊戲中常用的一些封裝。當我們要在螢幕上繪製簡單的圖形時，我們直接計算點的座標就可以，但是遊戲世界中經常有些複

Cocos2d-x學習筆記（四）布景層的加入移除

dcl from position 顏色顯示地圖 idt col 分享學習布景層類也就是CCLayer類，每一個遊戲場景中都能夠有非常多層，每一層負責各自的任務。顯示地圖、顯示人物等。同一時候層還是一個容器，能夠放入文本、圖片和菜單。構成遊戲中一個個UI。這次

bfzwjeqjSpriNgMc學習系列（3）之url

ref htm 學習 pri blank url lan get 系列 bfzwjeqjSpriNgMc學習系列（3）之url χ絳 bfzwjeqjSpriNgMc學習系列（3）之urlbfzwjeqjSpriNgMc學習系列（3）之url

塔防遊戲學習日記（二）之朝敵人發射子彈

one for component targe instant .cn times code 至少　　檢測到炮塔內敵人進入以後，當然下一步就是要向他們發射子彈。　　接下來我們來做朝敵人發射子彈的相關操作。　　分析一下，要向敵人發射子彈，需要有攻擊速度，簡單的計時器，子

Jest 學習筆記（一）之matchers

react 使用 babel 不能文件夾 fin 控制 -- scripts 　　Jest官網地址： https://facebook.github.io/jest/　　　　Jest是專門被facebook用於測試包括React應用在內的所有javascript代碼，J

python學習筆記（六）之集合1

什麽 mos pty this ash 筆記 sca sel 指定 python學習筆記（六）之集合1python中各種類型與其各種方法，都可以使用下面的方法查到：(1)交互模式下用dir()或者help()(2)google集合特點：英語set，有的可變，有的不可變；元素

python學習筆記（六）之集合2

lock true 可變對象屬於 attribute 聯盟 per rec python學習筆記（七）之集合2不變的集合在”python學習筆記（六）之集合1“中以set()來建立集合，這種方式所創建的集合都是可原地修改的集合，或者說是可變的，也就是說是unhashab

python學習筆記（八）之運算符

技術 ima 學習表達式 water nag proc 說明 ddc python學習筆記（八）之運算符算術運算符比較運算符邏輯運算符（1）布爾運算（2）復雜的布爾表達式說明：以上內容摘自《跟老齊學python》python學習筆記（八）之運算符

python學習筆記（九）之語句1

如果 red 開始就是整除 for 循環個數 hello 基本 python學習筆記（九）之語句1printpython2中，print是一個語句，python3中它是一個函數。實例1: >> print "hello,world!"

ryu學習筆記（2）之 ryu-manager運行報錯

.com 其他 nbsp -i OS in use 分配 art -s http://blog.csdn.net/haimianxiaojie/article/details/48769653 ryu在使用的時候最常出現的報錯是：address already in

python的學習筆記（0）之循環的使用1

循環條件 back 技術分享 -s 這就是相同直接用法深入　　這是我第一次正式的開始學習這門語言，雖然之前也多多少少接觸過一點，但是一直沒有深入的學習和研究過，所以我打算從今天起準備開始由淺入深的學習下這門語言。　　python這門語言和其他語言相比最大的特點就

ESP32學習筆記（四）之I2C總線

oid 操作系統 parameter ica basis condition 技術分享 col rto 上一篇帖子我們了解了一下ESP32運行多任務的操作以及現象，其實也就是一個實時操作系統。那麽，這篇帖子我們就結合“LM75a”溫度傳感器來學習一下ESP32的IIC總線吧

SpringBoot 2.X 學習筆記（一）Spring Boot HelloWorld

pre urn art release ret XML tap tro 簡化 Spring Boot HelloWorld 實現一個最簡單的功能：瀏覽器發送hello請求，服務器接受請求並處理，響應Hello World字符串； 1、創建一個maven工程；（jar） 2、

SpringMVC學習系列（1）之初識SpringMVC

映射 lin logs intern fault lan 前端 png let /*springMvc的總結：（推薦，總共有十五章） *http://www.cnblogs.com/liukemng/p/3751338.html */ 1.什麽是Spring MVC：

Meteor學習路程（三）之資料庫的例子（5）【刪除】

這個例子插入的例子是在http://blog.csdn.net/miss_ll/article/details/54573802資料庫基礎進行繼續完善的。與update類似，也需要指定目標文件ID。新增“刪除”按鈕，單擊後彈出確認提示框，確認後在集合中刪除模板文件。（1）

Meteor學習路程（三）之資料庫的例子（4）【修改】

這個例子插入的例子是在http://blog.csdn.net/miss_ll/article/details/54377748資料庫基礎進行繼續完善的。這幾個例子都是仿照著《Meteor全棧開發》完成的哦。接下來，會在每條展示的使用者資訊後面新增“修改”按鈕，單擊後，詞條記錄文字變

Meteor學習路程（三）之資料庫的例子（3）【查詢】

這個例子插入的例子是在http://blog.csdn.net/miss_ll/article/details/54573400資料庫基礎進行繼續完善的，資料庫中存在著三條資料。查詢的方式：（1）條件查詢修改資料庫helper，我這裡是testsusers.js Tem

Meteor學習路程（三）之資料庫的例子（2）【插入】

這個例子插入的例子是在http://blog.csdn.net/miss_ll/article/details/54377748資料庫基礎進行繼續完善的。（1）在client/template資料夾下面新建一個插入表單模板insertform.html <template name

Meteor學習路程（三）之資料庫的例子（1）【查詢】

接下來會用Meteor的幾種方式展示出資料：第一步：命令列新建工程 meteor create dbTest ....... cd dbTest ....... meteor npm install ....... meteor第二步：第一種方式：模擬資料在clien

angularJs1.x學習——指令（directive）之scope

相關推薦