如何檢查AngularJS中是否指定了指令的方法參數？

我創建了一個包含按鈕的自定義指令。這個按鈕從'callback'屬性指定的父作用域中調用一個方法。如何檢查AngularJS中是否指定了指令的方法參數？

<!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>

我的問題是：

如何控制內部模板按鈕的知名度？如果未在自定義標記中指定回調屬性（請參閱第3個my-directive標記），我想隱藏它。當我檢查typeof的回調，我總是得到'功能'和angular.isDefined（...）也返回true。

來源

2014-02-21 Ferenc T

檢查指令的鏈接函數中的attrs數組 –

綜觀angularjs源代碼，我看到：

case '&': 
    parentGet = $parse(attrs[attrName]); 
    isolateScope[scopeName] = function(locals) { 
     return parentGet(scope, locals); 
    }; 
    break;

的parentGet是結合的函數表達式。不幸的是，這是一個局部變量，僅對通過閉包分配給isolateScope[scopeName]的功能可用。

而不是試圖找到一種方法來獲得該變量，一個簡單的解決方案只是檢查attrs。嘗試：

link: function(scope,elem,attrs) { 

     scope.hasCallback = function() { 
     return angular.isDefined(attrs.callback); 
     } 
    }

DEMO

來源

2014-02-21 13:04:12

幫助，謝謝。 –

@Ferenc T：你可以將答案標記爲接受，如果它可以幫助你。謝謝 –

幫助了我，但不是'angular.isDefined'我更喜歡vanilla-js'attrs.hasOwnProperty（'callback'）;' – Stalinko

使用'&？如果屬性尚未設置，則返回undefined。

'&'=總是定義回調函數。

'&？' =回調函數僅在html模板中定義屬性時定義。

bindToController: { 
    callback: '&?' 
}, 
controller: function() { 
    if (this.callback === undefined) { 
     // attribute "callback" was not defined 
    } 
}

注意：適用於Angular 1.4.8。我不確定它是否適用於舊版本。

來源

2015-11-26 10:17:08

真棒！從來沒有讀過這個 – CodeNashor

這工作完美，是一個更優雅的解決方案。應該是正確的答案。 – Rebecca

[文檔]（https://docs.angularjs.org/api/ng/service/$compile#-scope-）中沒有關於它的單詞。 – fracz

如何檢查AngularJS中是否指定了指令的方法參數？

回答

相關問題