javascript - crear - directivas personalizadas angularjs

Verificar existencia de atributo en Directiva Angular

Question

Es posible verificar si un atributo dado está presente en una directiva, idealmente usando el alcance aislado o en el peor de los casos el objeto atributos.

Con una directiva que se parecía a esta <project status></project> , quiero representar condicionalmente un ícono de estado, pero solo si el atributo de estado está presente.

return {
restrict: ''AE'',
scope: {
status: ''@''
},
link: function(scope, element, attrs) {
scope.status === ''undefined''
}
}

Idealmente, estaría vinculado directamente al alcance, de modo que se pudiera usar en la plantilla. Sin embargo, el valor de la variable vinculada no está definido . Lo mismo vale para & read-only y = bindings bidireccionales .

Sé que se resuelve trivialmente agregando un <project status=''true''></project> , pero para las directivas que usaré con frecuencia, preferiría no tener que hacerlo. (Validez XHTML, no es un problema).

Answer 1

Dado que el valor de attrs es tipo de object javascript. Para verificar la existencia del atributo también podemos usar el método hasOwnProperty() in lugar in palabra clave.

Entonces, podría ser:

link: function(scope, element, attrs) {
var is_key_exist = attrs.hasOwnProperty(''status'');//Will return true if exist
}

Puede leer más sobre la diferencia entre las palabras clave y el método hasOwnProperty() en este link

Answer 2

La forma de hacer lo que desea es mirar el objeto de atributo en la función de enlace:

link:
function(scope, element, attrs) {
if("status" in attrs)
//do something
}

Answer 3

La forma de hacerlo es verificar la existencia de los atributos dentro del parámetro attrs de la función de enlace y asignar esto a las variables dentro del alcance aislado de su directiva.

scope:{},
link: function(scope, element, attrs){
scope.status = ''status'' in attrs;
},

Esto debería funcionar sin tener que usar una instrucción if dentro de su función de enlace.

Answer 4

Para verificar los atributos al usar componentes angulares 1.5+ puede usar el gancho del ciclo de vida $ postLink y el servicio $ element como este:

constructor(private $element) {}
$postLink() {
if(!this.$element.attr(''attr-name'')){
// do something
}
}