首頁(yè) 猿問(wèn) 指令函數(shù) 怎么傳參數(shù)...

指令函數(shù) 怎么傳參數(shù) angularjs?

AngularJS

MMTTMM 2018-11-14 19:15:45

指令函數(shù) 怎么傳參數(shù) angularjs

查看完整描述

1 回答

犯罪嫌疑人X

TA貢獻(xiàn)2080條經(jīng)驗(yàn) 獲得超4個(gè)贊

指令，很重要

AngularJS與JQuery最大的區(qū)別在哪里？我認(rèn)為，表現(xiàn)在數(shù)據(jù)雙向綁定，實(shí)質(zhì)就是DOM的操作形式不一樣。

JQuery通過(guò)選擇器找到DOM元素，再賦予元素的行為；

而AngularJS則是，將指令與DOM綁定在一起，再擴(kuò)展指令的行為。

所以AngularJS開(kāi)發(fā)最理想的結(jié)果就是，在頁(yè)面HTML與CSS的設(shè)計(jì)時(shí)，設(shè)計(jì)工程師只需要關(guān)注指令的使用；而在背后的邏輯開(kāi)發(fā)上，架構(gòu)工程師則是不需要知道如何操作DOM，只需要關(guān)注指令背后的行為要如何實(shí)現(xiàn)就行；測(cè)試工程師也可以開(kāi)發(fā)針對(duì)指令的單元測(cè)試。

指令就是DOM與邏輯行為的媒介，本質(zhì)就是DOM綁定的獨(dú)立邏輯行為函數(shù)。

指令難點(diǎn)在于參數(shù)

來(lái)看看都有哪些
angular.module('app', [])
.directive('myDirective', function() {
return {
restrict: String,
priority: Number,
terminal: Boolean,
template: String or Template Function:
function(tElement, tAttrs) {...},
templateUrl: String,
replace: Boolean or String,
scope: Boolean or Object,
transclude: Boolean,
controller: String or
function(scope, element, attrs, transclude, otherInjectables) { ... },
controllerAs: String,
require: String,
link: function(scope, iElement, iAttrs) { ... },
compile: // 返回一個(gè)對(duì)象或連接函數(shù)，如下所示：
function(tElement, tAttrs, transclude) {
return {
pre: function(scope, iElement, iAttrs, controller) { ... },
post: function(scope, iElement, iAttrs, controller) { ... }
}
return function postLink(...) { ... }
}
};
});

剛開(kāi)始接觸指令的時(shí)候，我簡(jiǎn)直就是蒙了，這堆參數(shù)究竟怎么用怎么理解啊。告訴大家我的一個(gè)理解方法。
把它們分成三類：

描述指令或DOM本身特性的內(nèi)部參數(shù)

連接指令外界、與其他指令或控制器溝通的對(duì)外參數(shù)

描述指令本身行為的行為參數(shù)

內(nèi)部參數(shù)

restrict：String，E（元素）<my-directive></my-directive> A（屬性，默認(rèn)值）<div
my-directive="expression"></div> C（類名）<div class="my-directive:expression;"></div> M（注釋）<--directive:my-directive
expression-->

priority: Number，指令執(zhí)行優(yōu)先級(jí)

template: String，指令鏈接DOM模板，例如“<h1>{{head}}</h1>”

templateUrl:String，DOM模板路徑

replace: Boolean，指令鏈接模板是否替換原有元素，

對(duì)外參數(shù)——scope

scope參數(shù)非常重要，本應(yīng)該是放到最后說(shuō)明的，但是scope卻是理解其他參數(shù)的關(guān)鍵，所以務(wù)必先跟大家說(shuō)清楚。

scope參數(shù)的作用是，隔離指令與所在控制器間的作用域、隔離指令與指令間的作用域。

scope參數(shù)是可選的，默認(rèn)值為false，可選true、對(duì)象{}；

false：共享父域

true：繼承父域，且新建獨(dú)立作用域

對(duì)象{}：不繼承父域，且新建獨(dú)立作用域

false、true、{}三者對(duì)比

來(lái)看個(gè)例子
<body>
<div ng-controller='parentCtrl'>
<h3>指令scope參數(shù)——false、true、{}對(duì)比測(cè)試</h3>
parent:
<div>
<span> {{parentName}}</span>
<input type="text" ng-model="parentName" />
</div>
<br />
<child-a></child-a>
<br />
<child-b></child-b>
<br />
<child-c parent-name="parentName"></child-c>
</div>

<script type="text/html" id="t1">
<div>
<span>{{parentName}}</span>
<input type="text" ng-model="parentName" />
</div>
</script>
<script>
var app = angular.module("app", []);

app.controller('parentCtrl', function ($scope) {
$scope.parentName = "parent";
})

//false：共享作用域
app.directive('childA', function () {
return {
restrict: 'E',
scope: false,
template: function (elem, attr) {
return "false:" + document.getElementById('t1').innerHTML;
}
};
});

//true：繼承父域，并建立獨(dú)立作用域
app.directive('childB', function () {
return {
restrict: 'E',
scope: true,
template: function (elem, attr) {
return "true:" + document.getElementById('t1').innerHTML;
},
controller: function ($scope) {
$scope.parentName = "parent";

//已聲明的情況下，$scope.$watch監(jiān)聽(tīng)的是自己的parentName
$scope.$watch('parentName', function (n, o) {
console.log("child watch" + n);
});

//$scope.$parent.$watch監(jiān)聽(tīng)的是父域的parentName
$scope.$parent.$watch('parentName', function (n, o) {
console.log("parent watch" + n);
});
}
};
});

//{}：不繼承父域，建立獨(dú)立作用域
app.directive('childC', function () {
return {
restrict: 'E',
scope: {},
template: function (elem, attr) {
return "{}:" + document.getElementById('t1').innerHTML;
},
controller: function ($scope) {
console.log($scope);
}
};
});

</script>
</body>

false參數(shù)

本質(zhì)：子域與父域共享作用域。
特點(diǎn)：父域修改parentName的同時(shí)，指令綁定的parentName的元素會(huì)被刷新。
blog.csdn.net/kongjiea/article/details/49840035