如何检查一个指令的方法参数是否在AngularJS中指定?
我创build了一个包含一个button的自定义指令。 该button从“callback”属性指定的父范围中调用一个方法。
<!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>
我的问题是:
如何控制模板内button的可见性? 如果在自定义标签中没有指定callback属性(请参阅第三个my-directive标签),我想隐藏它。 当我检查typeof的callback,我总是得到'function'和angular.isDefined(…)也返回true。
使用'&?' 如果属性尚未设置,则返回undefined。
'&'=callback函数总是被定义的。
'&?' =只有在html模板中定义属性时才定义callback函数。
bindToController: { callback: '&?' }, controller: function() { if (this.callback === undefined) { // attribute "callback" was not defined } }
注意:适用于Angular 1.4.8。 我不确定它是否适用于旧版本。
看着angularjs源代码,我看到这个:
case '&': parentGet = $parse(attrs[attrName]); isolateScope[scopeName] = function(locals) { return parentGet(scope, locals); }; break;
parentGet
是绑定的函数expression式。 不幸的是,这是一个局部variables,只有通过闭包分配给isolateScope[scopeName]
的函数才可用。
而不是试图find一个方法来获得这个variables,一个简单的解决scheme就是检查attrs
。 尝试:
link: function(scope,elem,attrs) { scope.hasCallback = function() { return angular.isDefined(attrs.callback); } }
DEMO