angularJs自定義指令用法我忽略,之前有寫過,這里只說一下父子級之間如何傳值;
例如:
模塊我定義為myApp,index.html定義 <my-html bol-val="bolVal"></my-html>,index的controller定義為myAppCtrl;
js: angular.module('app.myApp')
.controller('myAppCtrl',['$scope','myService',myAppCtrl])
.service('myService',function(){
var obj = {};
this.setValue = function(key,value){
obj[key] = value;
};
this.getValue = function(key){
return obj[key];
};
this.clearValue = function(key){
delete obj[key]
};
}) //這個比較關鍵
.directive('myHtml',function(){
function myHtmlCtrl($scope,myService){
//子頁面邏輯
$scope.myFn=function(){
alert('Hello Word!');
};//假設有這樣一個函數
(1)父級給子級傳過來的值console.log($scope.bolVal);
(2)子級要傳給父級的值,例如要傳一個變量$scope.isShow = true,
則這樣設置:myService.setValue('isShow',$scope.isShow)//變量名稱可以自己定義,我為了方便還直接取了isShow;
}
return {
restrict: 'E',
replace: true,
scope:{
bolVal:'=' //有時這個值不一定拿得到,是因為嵌套層級太多,需要傳過去一個對象才能拿到,看情況而定,如果父級傳過來是個函數,那用“&”
},
templateUrl:'app/myapp/myhtml.html',//子級html文件所在路徑
controller:['$scope','myService',myHtmlCtrl],
controllerAs:'vm',
link: function ($scope,element,attrs) {
//link函數這里主要進行dom操作
(1)第一種:可以調用子級的方法。我這里是監聽傳過來值的變化對這個子頁面進行dom操作
$scope.$watch('bolVal', function (nwVal, odVal) {
if (nwVal != odVal) {
$scope.myFn();
}
});
(2)第二種:可以靈活調用父級方法。
這里link可以做很多事情,我就不多說了,可以多找幾個例子看看!
}
};
});
index頁面controller邏輯
function myAppCtrl($scope,myService){
//業務邏輯
(1)父傳子:
如果index頁面有一個$scope.bolVal = true值;我想要傳到子頁面myhtml.html中,
那很簡單如上寫法頁面里定義bol-val="bolVal",切記:遇到大寫的一定加“-”並改為小寫,
directive return 對象scope里bolVal:"="
(2)子傳父:
如果myhtml頁面中有一個值想要傳到index頁面,那就比較復雜,angularJs用法還是比較靈活的,
可以寫一個service服務兩個controller中分別注入,例如定義為myService,如上;
這時,在子頁面myhtml的controller里邊設置要傳的值,在父頁面獲取傳過來的值;
父頁面取值,注意一點:這個值有可能會保存到本地,所以設置之前要先清除:
myService.clearValue('isShow');
myService.getValue('isShow');
}