[英]Use Angular Directive attributes in its template
如何在指令中使用屬性的值? 我的元素看起來像這樣:
<div class="tooltip-icon"
data-my-tooltip="click"
data-tooltip-title="foo"
data-tooltip-content="test content"></div>
我想在我的指令模板中使用它,如下所示:
mainApp.directive('myTooltip',
function() {
// allowed event listeners
var allowedListeners = ["click"];
return {
restrict: 'A',
template: '<div class="tooltip-title">...</div>' +
'<div class="tooltip-content">' +
'...</div>',
link: function(scope, elm, attrs) {
if(allowedListeners.indexOf(attrs.myTooltip) != -1){
elm.bind(attrs.myTooltip, function(){
...
});
}
}
};
}
);
三點的位置應該是代碼,但我無法弄清楚如何將attrs對象的內容( attrs.tooltipTitle
等)放入該模板中。
您可以拉出屬性並將它們放入指令的范圍,如下所示:
angular.module('myApp', []).
directive('myTooltip', function ($log) {
// allowed event listeners
var allowedListeners = ["click"];
return {
restrict: 'A',
template: '<div class="tooltip-title">{{tooltipTitle}}</div>' +
'<div class="tooltip-content">' +
'{{tooltipContent}}</div>',
scope: {
tooltipTitle: '@tooltipTitle',
tooltipContent: '@tooltipContent'
},
link: function (scope, elm, attrs) {
if (allowedListeners.indexOf(attrs.myTooltip) != -1) {
elm.bind(attrs.myTooltip, function () {
$log.info('clicked');
});
}
}
};
});
這是小提琴: http : //jsfiddle.net/moderndegree/f3JL3/
這個問題已經回答了,但我想分享我的角碼藏漢,因為這是一個領域,但是這是看到幾個工作實例。
我有幾個網頁,每個網頁都有自己的Angular控制器,我想要一種方法在每個頁面上都有一個 “Please Wait”彈出窗口,當任何一個頁面被稱為HTTP GET或POST Web服務時都會出現。
為此,我的每個網頁都包含以下行:
<please-wait message="{{LoadingMessage}}" ></please-wait>
...綁定到該頁面控制器中的$scope
...
$scope.LoadingMessage = "Loading the surveys...";
這是我的<please-wait>
指令的代碼:
myApp.directive('pleaseWait',
function ($parse) {
return {
restrict: 'E',
replace: true,
scope: {
message: '@message'
},
link: function (scope, element, attrs) {
scope.$on('app-start-loading', function () {
element.fadeIn();
});
scope.$on('app-finish-loading', function(){
element.animate({
top: "+=15px",
opacity: "0"
}, 500);
});
},
template: '<div class="cssPleaseWait"><span>{{ message }}</span></div>'
}
});
請注意它如何獲取message
屬性(在此示例中為{{LoadingMessage}}
)並可以在指令的模板中顯示其值。
(這實際上是我答案中唯一直接回答這個問題的部分,但請繼續閱讀,以獲得更多提示''''')
現在,很酷的部分是,每當我想要從Web服務加載或保存任何數據時,我的每個控制器都會調用Angular數據服務。
$scope.LoadAllSurveys = function () {
DataService.dsLoadAllSurveys($scope).then(function (response) {
// Success
$scope.listOfSurveys = response.GetAllSurveysResult;
});
}
dsLoadAllSurveys
函數看起來像這樣......
myApp.webServicesURL = "http://localhost:15021/Service1.svc";
myApp.factory('DataService', ['$http', 'httpPostFactory', 'httpGetFactory',
function ($http, httpPostFactory, httpGetFactory) {
var dsLoadAllSurveys = function (scope)
{
// Load all survey records, from our web server
var URL = myApp.webServicesURL + "/getAllSurveys";
return httpGetFactory(scope, URL);
}
return {
dsLoadAllSurveys: dsLoadAllSurveys
}
}]);
而且,至關重要的是,所有“GET”Web服務調用都通過以下功能進行,該功能為我們顯示了Please Wait控件...然后在服務完成后將其消失。
myApp.factory('httpGetFactory', function ($http, $q) {
return function (scope, URL) {
// This Factory method calls a GET web service, and displays a modal error message if something goes wrong.
scope.$broadcast('app-start-loading'); // Show the "Please wait" popup
return $http({
url: URL,
method: "GET",
headers: { 'Content-Type': undefined }
}).then(function (response) {
scope.$broadcast('app-finish-loading'); // Hide the "Please wait" popup
if (typeof response.data === 'object') {
return response.data;
} else {
// invalid response
return $q.reject(response.data);
}
}, function (errorResponse) {
scope.$broadcast('app-finish-loading'); // Hide the "Please wait" popup
// The WCF Web Service returned an error.
// Let's display the HTTP Status Code, and any statusText which it returned.
var HTTPErrorNumber = (errorResponse.status == 500) ? "" : "HTTP status code: " + errorResponse.status + "\r\n";
var HTTPErrorStatusText = errorResponse.statusText;
var message = HTTPErrorNumber + HTTPErrorStatusText;
BootstrapDialog.show({
title: 'Error',
message: message,
buttons: [{
label: 'OK',
action: function (dialog) {
dialog.close();
},
draggable: true
}]
});
return $q.reject(errorResponse.data);
});
};
});
我喜歡這段代碼的是這個函數在顯示/隱藏“請稍候”彈出窗口之后,如果發生錯誤,它還會在返回錯誤結果之前顯示錯誤消息(使用優秀的BootstrapDialog庫)回到來電者。
如果沒有這個工廠功能,每當我的一個Angular控制器調用Web服務時,它就需要顯示,然后隱藏“Please wait”控件,並檢查錯誤。
現在,我可以調用我的Web服務,並讓它通知用戶是否出現問題,否則我可以認為它一切正常,並處理結果。
這允許我有更簡單的代碼。 記住我如何調用該Web服務:
DataService.dsLoadAllSurveys($scope).then(function (response) {
// Success
$scope.listOfSurveys = response.GetAllSurveysResult;
});
該代碼看起來好像沒有進行任何錯誤處理,而實際上,它只是在一個地方的后台處理。
我仍然使用Angular獲得工廠和數據服務,但我認為這是他們如何提供幫助的一個很好的例子。
希望這有意義,並有所幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.