javascript - crear - directivas estructurales angular

Usar atributos de directiva angular en su plantilla.

Question

¿Cómo puedo usar el valor de un atributo en una directiva? Mi elemento se ve así:

<div class="tooltip-icon"
data-my-tooltip="click"
data-tooltip-title="foo"
data-tooltip-content="test content"></div>

Me gustaría usar eso en la plantilla de mi directiva, que se ve así:

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(){
...
});
}
}
};
}
);

Donde están los puntos triples, debería haber código, pero no puedo averiguar cómo incluir el contenido del objeto attrs.tooltipTitle ( attrs.tooltipTitle , etc.) en esa plantilla.

Answer 1

Esta pregunta ya ha sido respondida, pero también compartiré mi código Angular, ya que esta es un área donde a menudo es útil ver algunos ejemplos de trabajo.

Tengo algunas páginas web, cada una con su propio controlador Angular, y quería una manera de tener una ventana emergente "Por favor, espere" en cada página, que aparecería cuando cualquiera de las páginas se llamara un servicio web HTTP GET o POST.

Para ello, cada una de mis páginas web contiene esta línea:

<please-wait message="{{LoadingMessage}}" ></please-wait>

... que está vinculado a un $scope en el controlador de esa página ...

$scope.LoadingMessage = "Loading the surveys...";

Aquí está el código para mi directiva <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>''
}
});

Observe cómo recoge el atributo del message ( {{LoadingMessage}} en este ejemplo) y puede mostrar su valor en la plantilla de la directiva.

(De hecho, esa es la única parte de mi respuesta que responde directamente a esta pregunta, pero sigue leyendo, para ver algunos consejos y trucos más ...)

Ahora, lo bueno es que cada uno de mis controladores llama a un servicio de datos Angular cada vez que quiere cargar o guardar datos de / en un servicio web.

 $scope.LoadAllSurveys = function () {
DataService.dsLoadAllSurveys($scope).then(function (response) {
// Success
$scope.listOfSurveys = response.GetAllSurveysResult;
});
}

La función dsLoadAllSurveys parece a esto ...

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
}
}]);

Y, lo que es más importante, todas las llamadas al servicio web "GET" se realizan a través de la siguiente función, que muestra el control "Por favor, espere" para nosotros ... luego desaparece cuando el servicio se ha completado.

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);
});
};
});

Lo que me encanta de este código es que esta función se ve después de mostrar / ocultar la ventana emergente "Por favor, espere", y si se produce un error, también se ve después de mostrar el mensaje de error (utilizando la excelente biblioteca BootstrapDialog ), antes de devolver el resultado del error de vuelta a la persona que llama.

Sin esta función de fábrica, cada vez que uno de mis controladores Angular llamaría a un servicio web, tendría que mostrar, luego ocultar, el control "Espere" y verificar si hay errores.

Ahora, solo puedo llamar a mi servicio web y dejarlo para informar al usuario si algo sale mal, de lo contrario, puedo asumir que todo está funcionando y procesar los resultados.

Esto me permite tener un código mucho más simple. Recuerda cómo llamé a ese servicio web:

 DataService.dsLoadAllSurveys($scope).then(function (response) {
// Success
$scope.listOfSurveys = response.GetAllSurveysResult;
});

Ese código parece que no está haciendo ningún manejo de errores, mientras que en realidad, todo se resuelve detrás de la escena en un solo lugar.

Todavía estoy familiarizándome con las fábricas y los servicios de datos con Angular, pero creo que este es un ejemplo de cómo pueden ayudar.

Espero que esto tenga sentido, y ayuda.

Answer 2

Puede extraer los atributos y colocarlos en el ámbito de la directiva de la siguiente manera:

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'');
});
}
}
};
});

Aquí está el violín: http://jsfiddle.net/moderndegree/f3JL3/