Standardwert für Funktionen in AngularJs festlegen

Question

Ich möchte ein Standardverhalten für eine Funktion festlegen. Wenn die Funktion übergeben wird, sollte sie diese Methode ausführen, andernfalls sollte eine Standardmethode verwendet werden. Unten ist ein Code-Snippet, das ich versuche

module.directive("zoll",function(){ 
    return{ 
    restrict:"EAC", 
    scope:{ 
     displayName: "@", 
     buttonClick: "&" 
    }, 
    template:"<input type='button' id='cncl' value={{displayName}} ng-click='buttonClick()'>", 
    controller:function($scope){ 
     console.log($scope.buttonClick); 

     if($scope.buttonClick === undefined){ 
      $scope.buttonClick = function() { 
       alert("Inside Button"); 
      } 
     } 

    } 
    } 
}); 

Answer 1

Hier gehen Sie. Erwägen Sie, Ihre controller Funktion zu link Funktion zu ändern, so dass wir mit den $attr (Attribute der Direktiven) überprüfen können, ob die Callback-Funktion bereitgestellt wird oder nicht.

Die Lösung mit Bereich funktioniert nicht, da Angular immer eine Funktion zuweist, wenn Sie '&' angeben. Prüfen Sie es hier: https://github.com/angular/angular.js/blob/v1.5.8/src/ng/compile.js#L3377

var module = angular.module("sa", []); 
 

 
module.controller("FooController", function($scope) { 
 

 
    $scope.callMe = function() { 
 
    alert("you called me"); 
 
    }; 
 
}); 
 

 
module.directive("zoll", function() { 
 
    return { 
 
    restrict: "EAC", 
 
    scope: { 
 
     displayName: "@", 
 
     buttonClick: '&' 
 
    }, 
 
    template: "<input type='button' value={{displayName}} ng-click='buttonClick()'>", 
 
    link: function($scope, element, $attr) { 
 
     if (!$attr.buttonClick) { 
 
     $scope.buttonClick = function() { 
 
      alert("Inside Button"); 
 
     } 
 
     } 
 
    } 
 
    } 
 
});

input { 
 
    width: 100%; 
 
    padding: 20px; 
 
    margin-bottom: 15px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="sa" ng-controller="FooController"> 
 
    <zoll display-name="1st Button"></zoll> 
 
    <br>2nd button with passed function 
 
    <zoll display-name="2nd Button" button-click="callMe()"></zoll> 
 
</div>