2-8 指令

時間 2019-12-08

標籤指令简体版

原文原文鏈接

2-8 指令

內容簡介

解析最簡單的指令hello：匹配模式restrict
解析最簡單的指令hello：template、templateUrl、$templateCache
解析最簡單的指令hello：replace與translude
comile與link（操做元素、添加css樣式、綁定事件）
指令與控制器之間的交互
指令間的交互
scope的類型與獨立scope
scope的綁定策略
實例解析Expander
實例解析Accordion
指令的運行原理：compile和link
總結：ERP類型的系統必備的UI組件
總結：互聯網/電商型系統必備的UI組件
第三方指令庫angular-ui
Directive思想的起源和原理概述

1. 解析最簡單的指令hello：匹配模式restrict

restrict：匹配模式。它有4個選項，分別爲

A 屬性attribute
E 元素element
M 註釋comment
C 樣式中的class

屬性方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令</title>
    <script src="../node_modules/angular/angular.js"></script>
    <script src="js/HelloAngular_Directive.js"></script>
</head>
<body ng-app="myApp">
<div hello></div>
</body>
</html>

/** * Created by engoo-ypf on 2017/3/6. */
var app=angular.module('myApp',[]);
app.directive('hello',function () {
    return{
        restrict:'A',
        template:'<div> hi everyone!</div>',
        replace:true
    }
})

渲染後結果：
javascript

元素方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令</title>
    <script src="../node_modules/angular/angular.js"></script>
    <script src="js/HelloAngular_Directive.js"></script>
</head>
<body ng-app="myApp">
<hello></hello>
</body>
</html>

/** * Created by engoo-ypf on 2017/3/6. */
var app=angular.module('myApp',[]);
app.directive('hello',function () {
    return{
        restrict:'E',
        template:'<div> hi everyone!</div>',
        replace:true
    }
})

渲染後結果：
css

註釋方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令</title>
    <script src="../node_modules/angular/angular.js"></script>
    <script src="js/HelloAngular_Directive.js"></script>
</head>
<body ng-app="myApp">
<!-- directive:hello -->
</body>
</html>

注意：指令``的寫法。它的先後都有空格。這個坑必定要注意啊！！！html

/** * Created by engoo-ypf on 2017/3/6. */
var app=angular.module('myApp',[]);
app.directive('hello',function () {
    return{
        restrict:'M',
        template:'<div> hi everyone!</div>',
        replace:true
    }
})

渲染後結果：
java

樣式方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令</title>
    <script src="../node_modules/angular/angular.js"></script>
    <script src="js/HelloAngular_Directive.js"></script>
</head>
<body ng-app="myApp">
<!--class樣式指令-->
<div class="hello"></div>
</body>
</html>

/** * Created by engoo-ypf on 2017/3/6. */
var app=angular.module('myApp',[]);
app.directive('hello',function () {
    return{
        restrict:'C',
        template:'<div> hi everyone!</div>',
        replace:true
    }
})

渲染後：
node

四種模式的使用場景

指令	含義	示例
A	屬性（默認）	`<div my-menu='Products'></div>`
E	元素	`<my-menu title=Products></my-menu>`
M	註釋	`<!-- directive:my-menu Products -->`
C	樣式類	`<div class='my-menu:Products'></div>`

推薦使用元素和屬性的方式使用指令
當須要建立帶有本身的模板的指令時，使用元素名稱的方式建立指令
當須要爲有的html標籤增長功能時，使用屬性的方式建立指令

2. 解析最簡單的指令hello：template、templateUrl、$templateCache

當咱們使用指令的時候，每次都要在js中去Template去寫html會很痛苦。爲此Angular爲咱們準備了templateUrl。react

templateUrl

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/angular/angular.js"></script>
    <script src="js/templateUrl.js"></script>
</head>
<body ng-app="myApp">
<hello></hello>
</body>
</html>

/** * Created by engoo-ypf on 2017/3/6. */
var app=angular.module('myApp',[]);
app.directive('hello',function () {
    return{
        reactive:'E',
        templateUrl:'tpls/tpls1.html',
        replace:true
    }
})

<div style="color: rebeccapurple; font-size: 50px">我是模板</div>

渲染後頁面：
web

$templateCache

若是咱們編寫的模板不單單是在現有的指令要使用，其餘的指令也要使用該模板。咱們就能夠$templateCache。它能夠將咱們的模板進行緩存起來。緩存

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/angular/angular.js"></script>
    <script src="js/templateCache.js"></script>
</head>
<body ng-app="myApp">
<hello></hello>
</body>
</html>

/** * Created by engoo-ypf on 2017/3/6. */
var app=angular.module('myApp',[]);
// 注射器加載完全部模塊時，此方法執行一次
app.run(function ($templateCache) {
    $templateCache.put('helloTemple.html','<div>hello everyone!!!</div>')
});
app.directive('hello',function ($templateCache) {
    return{
        restrict:'E',
        template:$templateCache.get('helloTemple.html'),
        replace:true
    }
})

3. 解析最簡單的指令hello：replace與translude

前面咱們都是使用replace來替換頁面中內容，那麼若是咱們不想替換，而是想在裏面追加。那麼我就可使用translude。app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/angular/angular.js"></script>
    <script src="js/transclude.js"></script>
</head>
<body ng-app="myApp">
<hello>
    <div>我是頁面內容</div>
</hello>
</body>
</html>

/** * Created by engoo-ypf on 2017/3/6. */
var app=angular.module('myApp',[]);
app.directive('hello',function () {
    return{
        restrict:'E',
        transclude:true,
        template:'<div>hello everyone! <div ng-transclude></div></div>'
    }
})

4. comile與link（操做元素、添加css樣式、綁定事件）

1488784946835.jpg

5. 指令與控制器之間的交互

採用link的方式來進行交互。函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/angular/angular.js"></script>
    <script src="js/Directive&Controller.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
    <loader >滑動加載</loader>
</div>
</body>
</html>

/** * Created by engoo-ypf on 2017/3/6. */
var app=angular.module('myApp',[]);
app.controller('myCtrl',['$scope',function ($scope) {
    $scope.loadData=function () {
        console.log('數據加載中~~~~');
    }
}])

app.directive('loader',function () {
    return{
        restrict:'AE',
        link:function (scope,element,attr) {
            //當鼠標滑動到該指令的時候，執行下面代碼
            element.bind('mouseenter',function () {
                // scope.loadData(); 直接調用
                scope.$apply('loadData()') //也能夠這樣調用
            })
        }
    }
})

那麼若是咱們有多個指令須要調用不一樣的Controller中的function如何作呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/angular/angular.js"></script>
    <script src="js/Directive&Controller.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
    <loader howLoadData="loadData1()">滑動加載1</loader>
    <loader howLoadData="loadData2()">滑動加載2</loader>
</div>
</body>
</html>

/** * Created by engoo-ypf on 2017/3/6. */
var app=angular.module('myApp',[]);
app.controller('myCtrl',['$scope',function ($scope) {
    $scope.loadData1=function () {
        console.log('數據1加載中~~~~');
    }
    $scope.loadData2=function () {
        console.log('數據2加載中~~~~');
    }
}])

app.directive('loader',function () {
    return{
        restrict:'AE',
        link:function (scope,element,attr) {
            //當鼠標滑動到該指令的時候，執行下面代碼
            element.bind('mouseenter',function () {
                // scope.loadData();
				//這裏有個坑：html中寫的屬性名字，在這裏必須所有轉成小寫
                scope.$apply(attr.howloaddata)
            })
        }
    }
})

6. 指令間的交互

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/angular/angular.js"></script>
    <script src="src/js/Directive&Directive.js"></script>
</head>
<body ng-app="myApp">
<div class="row">
    <div class="col-md-3">
        <superman strength>動感超人1---力量</superman>
    </div>
</div>
<div class="row">
    <div class="col-md-3">
        <superman strength speed>動感超人2---力量+敏捷</superman>
    </div>
</div>
<div class="row">
    <div class="col-md-3">
        <superman strength speed light>動感超人2---力量+敏捷+發光</superman>
    </div>
</div>
</body>
</html>

/** * Created by engoo-ypf on 2017/3/6. */
var app=angular.module('myApp',[]);
app.directive('superman',function () {
    return{
        // 建立獨立的做用域
        scope:{},
        restrict:'AE',
        // 指令內部的Controller。主要是用來暴露自己的方法供其它指令調用
        controller:function ($scope) {
            //給指令暴露出3個方法，以供其它指令調用
            $scope.abilities=[];
            this.addStrength=function () {
                $scope.abilities.push('strength');
            };
            this.addSpeed=function () {
                $scope.abilities.push('speed');
            };
            this.addLight=function () {
                $scope.abilities.push('light');
            };
        },
        link:function (scope,element,attrs) {
            element.addClass('btn btn-primary');
            element.bind('mouseenter',function () {
                console.log(scope.abilities);
            })
        }
    }
})

app.directive('strength',function () {
    return{
        //表示如今的指令時依賴於superman指令
        require:'^superman',
        link:function (scope,element,attrs,supermanCtrl) {
            supermanCtrl.addStrength();
        }
    }
})

app.directive('speed',function () {
    return{
        //表示如今的指令時依賴於superman指令
        require:'^superman',
        link:function (scope,element,attrs,supermanCtrl) {
            supermanCtrl.addSpeed();
        }
    }
})
app.directive('light',function () {
    return{
        //表示如今的指令時依賴於superman指令
        require:'^superman',
        link:function (scope,element,attrs,supermanCtrl) {
            supermanCtrl.addLight();
        }
    }
})

7. scope的類型與獨立scope

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/angular/angular.js"></script>
    <script src="js/isolateScope.js"></script>
</head>
<body ng-app="myApp">
<hello></hello>
<hello></hello>
<hello></hello>
<hello></hello>
</body>
</html>

/** * Created by engoo-ypf on 2017/3/6. */
var app = angular.module('myApp', []);
app.directive('hello', function () {
    return {
        restrict: 'AE',
		//這是這句後，咱們的指令中的scope就會獨立使用，不會相互污染啦
        scope: {},
        template: '<div><input type="text" ng-model="userName"/>{{userName}}</div>',
        replace: true
    }
})

8. Scope的綁定策略

參數	解釋
@	把當前屬性做爲字符串傳遞（不能傳遞對象）。你還能夠綁定來自外層scope的值，在屬性值中插入{{}} 便可
=	與父級scope中的屬性進行雙向綁定
&	傳遞一個來自父級scope的函數，稍後調用

@綁定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/angular/angular.js"></script>
    <script src="js/scopeAt.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
    <drink flavor="{{ctrlFlavor}}"></drink>
</div>
</body>
</html>

/** * Created by engoo-ypf on 2017/3/6. */
var app=angular.module('myApp',[]);
app.controller('MyCtrl',['$scope',function ($scope) {
    $scope.ctrlFlavor='百威'
}])

app.directive('drink',function () {
  return{
      restrict:'AE',
      scope:{
          flavor:'@'
      },
      template:'<div>{{flavor}}</div>'
  }
})

=綁定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/angular/angular.js"></script>
    <script src="src/js/scopeEqual.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
    指令:
    <drink flavor="ctrlFlavor"></drink>
    <br>
    控制器:
    <input type="text" ng-model="ctrlFlavor">
    <br>
</div>
</body>
</html>

/** * Created by engoo-ypf on 2017/3/6. */
var app=angular.module('myApp',[]);
app.controller('MyCtrl',['$scope',function ($scope) {
    $scope.ctrlFlavor='百威'
}])

app.directive('drink',function () {
    return{
        restrict:'AE',
        scope:{
            flavor:'='
        },
        template:'<input type="text" ng-model="flavor"/>'
    }
})

& 傳遞一個來自父級scope的函數，稍後調用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/angular/angular.js"></script>
    <script src="js/scopeAnd.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
    <greeting greet="sayHello(name)"></greeting>
    <greeting greet="sayHello(name)"></greeting>
    <greeting greet="sayHello(name)"></greeting>
    <greeting greet="sayHello(name)"></greeting>
</div>
</body>
</html>

/** * Created by yangp on 2017/3/6. */
var app=angular.module('myApp',[]);
app.controller('MyCtrl',['$scope',function ($scope) {
    $scope.sayHello=function (name) {
        alert('Hello'+name);
    }
}]);

app.directive('greeting',function () {
    return{
        restrict:'AE',
        scope:{
            greet:'&'
        },
        template:'<input type="text" ng-model="userName"/><br>'+
        '<button ng-click="greet({name:userName})">Greet</button><br>'
    }
})