ejemplos - ¿Cómo verificar si un argumento de método de una directiva se especifica en AngularJS?
directivas personalizadas angularjs (2)
Creé una directiva personalizada que contiene un botón. Este botón llama a un método del ámbito principal especificado por el atributo ''devolución de llamada''.
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Simple directive</title>
<script src="js/lib/angular/angular.js"></script>
<script type="text/javascript">
var app = angular.module(''app'', []);
app.controller(''TestController'', function($scope) {
$scope.doSomething = function(param) {
alert(''Something called with: '' + param);
}
})
app.directive(''myDirective'', function() {
var ret = {
restrict: ''E'',
scope: {
user: ''@'',
callback: ''&'' // bound a function from the scope
},
template: ''<div>Hello {{user}}<button ng-show="hasCallback()" ng-click="callback({userData: user})">Callback</button>'',
controller: function($scope) {
$scope.hasCallback2 = function() {
var t = typeof $scope.callback;
return t == ''function'';
}
$scope.hasCallback = function() {
return angular.isDefined($scope.callback);
}
}
};
return ret;
});
</script>
</head>
<body ng-controller="TestController">
<my-directive user="cat" callback="doSomething(userData)"></my-directive>
<my-directive user="dog" callback="doSomething(userData)"></my-directive>
<my-directive user="pig"></my-directive>
</body>
</html>
Mi pregunta es:
¿Cómo puedo controlar la visibilidad del botón dentro de la plantilla? Me gustaría ocultarlo si el atributo de devolución de llamada no se especifica en la etiqueta personalizada (consulte la etiqueta 3rd my-directive). Cuando compruebo el tipo de devolución de llamada, siempre obtengo ''function'' y angular.isDefined (...) también devuelve true.
Mirando el código fuente de angularjs, veo esto:
case ''&'':
parentGet = $parse(attrs[attrName]);
isolateScope[scopeName] = function(locals) {
return parentGet(scope, locals);
};
break;
parentGet es la expresión de la función enlazada. Desafortunadamente, esta es una variable local que solo está disponible para la función asignada a isolateScope[scopeName] través del cierre.
En lugar de tratar de encontrar una forma de obtener esa variable, una solución simple es simplemente verificar los attrs . Tratar:
link: function(scope,elem,attrs) {
scope.hasCallback = function() {
return angular.isDefined(attrs.callback);
}
}
Utilizando ''&?'' devuelve indefinido si el atributo no se ha establecido.
''&'' = la función de devolución de llamada se define siempre.
''&?'' = la función de devolución de llamada se define solo cuando el atributo está definido en la plantilla html.
bindToController: {
callback: ''&?''
},
controller: function() {
if (this.callback === undefined) {
// attribute "callback" was not defined
}
}
Nota: Funciona en Angular 1.4.8. No estoy seguro de si funciona en versiones anteriores.