指令函數 怎么傳參數 angularjs
1 回答
犯罪嫌疑人X
TA貢獻2080條經驗 獲得超4個贊
指令，很重要
AngularJS與JQuery最大的區別在哪里？我認為，表現在數據雙向綁定，實質就是DOM的操作形式不一樣。
JQuery通過選擇器找到DOM元素，再賦予元素的行為；
而AngularJS則是，將指令與DOM綁定在一起，再擴展指令的行為。
所以AngularJS開發最理想的結果就是，在頁面HTML與CSS的設計時，設計工程師只需要關注指令的使用；而在背后的邏輯開發上，架構工程師則是不需要知道如何操作DOM，只需要關注指令背后的行為要如何實現就行；測試工程師也可以開發針對指令的單元測試。
指令就是DOM與邏輯行為的媒介，本質就是DOM綁定的獨立邏輯行為函數。
指令難點在于參數
來看看都有哪些
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: // 返回一個對象或連接函數，如下所示：
function(tElement, tAttrs, transclude) {
return {
pre: function(scope, iElement, iAttrs, controller) { ... },
post: function(scope, iElement, iAttrs, controller) { ... }
}
return function postLink(...) { ... }
}
};
});
剛開始接觸指令的時候，我簡直就是蒙了，這堆參數究竟怎么用怎么理解啊。告訴大家我的一個理解方法。
把它們分成三類：
描述指令或DOM本身特性的內部參數
連接指令外界、與其他指令或控制器溝通的對外參數
描述指令本身行為的行為參數
內部參數
restrict：String，E（元素）<my-directive></my-directive> A（屬性，默認值）<div
my-directive="expression"></div> C（類名）<div class="my-directive:expression;"></div> M（注釋）<--directive:my-directive
expression-->
priority: Number，指令執行優先級
template: String，指令鏈接DOM模板，例如“<h1>{{head}}</h1>”
templateUrl:String，DOM模板路徑
replace: Boolean，指令鏈接模板是否替換原有元素，
對外參數——scope
scope參數非常重要，本應該是放到最后說明的，但是scope卻是理解其他參數的關鍵，所以務必先跟大家說清楚。
scope參數的作用是，隔離指令與所在控制器間的作用域、隔離指令與指令間的作用域。
scope參數是可選的，默認值為false，可選true、對象{}；
false：共享父域
true：繼承父域，且新建獨立作用域
對象{}：不繼承父域，且新建獨立作用域
false、true、{}三者對比
來看個例子
<body>
<div ng-controller='parentCtrl'>
<h3>指令scope參數——false、true、{}對比測試</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>
<!--t1指令模板-->
<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：繼承父域，并建立獨立作用域
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監聽的是自己的parentName
$scope.$watch('parentName', function (n, o) {
console.log("child watch" + n);
});
//$scope.$parent.$watch監聽的是父域的parentName
$scope.$parent.$watch('parentName', function (n, o) {
console.log("parent watch" + n);
});
}
};
});
//{}：不繼承父域，建立獨立作用域
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參數
本質：子域與父域共享作用域。
特點：父域修改parentName的同時，指令綁定的parentName的元素會被刷新。
blog.csdn.net/kongjiea/article/details/49840035
- 1 回答
- 0 關注
- 855 瀏覽
添加回答
舉報
0/150
提交
取消