AngularJS - przekazuje funkcję do dyrektywy

Mam przykład angularJS

<div ng-controller="testCtrl">

<test color1="color1" updateFn="updateFn()"></test>
</div>
 <script>
  angular.module('dr', [])
.controller("testCtrl", function($scope) {
    $scope.color1 = "color";
    $scope.updateFn = function() {
        alert('123');
    }
})
.directive('test', function() {
    return {
        restrict: 'E',
        scope: {color1: '=',
                updateFn: '&'},
        template: "<button ng-click='updateFn()'>Click</button>",
        replace: true,
        link: function(scope, elm, attrs) { 
        }
    }
});

</script>
</body>

</html>

Chcę, aby po kliknięciu przycisku pojawiło się okno alertu, ale nic się nie pokazuje.

Czy ktoś może mi pomóc?

Aby wywołać funkcję kontrolera w zakresie nadrzędnym z wnętrza dyrektywy zakresu izolowanego, użyj dash-separatednazw atrybutów w kodzie HTML, tak jak powiedział OP.

Również jeśli chcesz wysłać parametr do swojej funkcji, wywołaj funkcję, przekazując obiekt:

<test color1="color1" update-fn="updateFn(msg)"></test>

JS

var app = angular.module('dr', []);

app.controller("testCtrl", function($scope) {
    $scope.color1 = "color";
    $scope.updateFn = function(msg) {        
        alert(msg);
    }
});

app.directive('test', function() {
    return {
        restrict: 'E',
        scope: {
            color1: '=',
            updateFn: '&'
        },
        // object is passed while making the call
        template: "<button ng-click='updateFn({msg : \"Hello World!\"})'>
            Click</button>",
        replace: true,        
        link: function(scope, elm, attrs) {             
        }
    }
});

Fiddle

Być może czegoś mi brakuje, ale chociaż inne rozwiązania wywołują funkcję zakresu nadrzędnego, nie ma możliwości przekazywania argumentów z kodu dyrektywy, dzieje się tak dlatego, że update-fnwywołuje updateFn()ze stałymi parametrami, na przykład {msg: "Hello World"}. Niewielka zmiana pozwala dyrektywie na przekazywanie argumentów, co moim zdaniem jest o wiele bardziej przydatne.

<test color1="color1" update-fn="updateFn"></test>

Zauważ, że kod HTML przekazuje odwołanie do funkcji, tj. Bez ()nawiasów.

JS

var app = angular.module('dr', []);

app.controller("testCtrl", function($scope) {
    $scope.color1 = "color";
    $scope.updateFn = function(msg) {        
        alert(msg);
    }
});

app.directive('test', function() {
    return {
        restrict: 'E',
        scope: {
            color1: '=',
            updateFn: '&'
        },
        // object is passed while making the call
        template: "<button ng-click='callUpdate()'>
            Click</button>",
        replace: true,        
        link: function(scope, elm, attrs) {       
          scope.callUpdate = function() {
            scope.updateFn()("Directive Args");
          }
        }
    }
});

Tak więc w powyższym HTML wywołuje callUpdatefunkcję lokalnego zakresu , która następnie „pobiera” updateFn z zakresu nadrzędnego i wywołuje zwróconą funkcję z parametrami, które może wygenerować dyrektywa.

http://jsfiddle.net/mygknek2/

W tagu Html z dyrektywą „test” nazwa atrybutu funkcji nie powinna być wartością typu camelCased, ale oparta na myślniku.

so - zamiast:

<test color1="color1" updateFn="updateFn()"></test>

pisać:

<test color1="color1" update-fn="updateFn()"></test>

Jest to kątowy sposób na określenie różnicy między atrybutami dyrektywy (takimi jak funkcja update-fn) a funkcjami.

Co powiesz na przekazanie funkcji kontrolera z powiązaniem dwukierunkowym ? Następnie możesz go użyć w dyrektywie dokładnie tak samo, jak w zwykłym szablonie (dla uproszczenia usunąłem nieistotne części):

<div ng-controller="testCtrl">

   <!-- pass the function with no arguments -->
   <test color1="color1" update-fn="updateFn"></test>
</div>

<script>
   angular.module('dr', [])
   .controller("testCtrl", function($scope) {
      $scope.updateFn = function(msg) {
         alert(msg);
      }
   })
   .directive('test', function() {
      return {
         scope: {
            updateFn: '=' // '=' bidirectional binding
         },
         template: "<button ng-click='updateFn(1337)'>Click</button>"
      }
   });
</script>

Wylądowałem na tym pytaniu, ponieważ wypróbowałem powyższą metodę befire, ale jakoś nie zadziałała. Teraz działa idealnie.

użyj myślnika i małych liter dla nazwy atrybutu (jak powiedziano w innych odpowiedziach):

 <test color1="color1" update-fn="updateFn()"></test>

I użyj „=” zamiast „&” w zakresie dyrektywy:

 scope: { updateFn: '='}

Następnie możesz użyć updateFn jak każdej innej funkcji:

 <button ng-click='updateFn()'>Click</button>

Proszę bardzo!

Musiałem użyć wiązania „=” zamiast „&”, ponieważ to nie działało. Dziwne zachowanie.

@JorgeGRC Dzięki za odpowiedź. Jedna rzecz, jednak część „może” jest bardzo ważna. Jeśli masz parametr (y), musisz uwzględnić je / je również w swoim szablonie i upewnij się, że określisz swoje lokalne ustawienia, np updateFn({msg: "Directive Args"}.