AngularJS - fungsi lulus ke direktif

Saya punya contoh 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>

Saya ingin ketika saya mengklik tombol, kotak peringatan akan muncul, tetapi tidak ada yang ditampilkan.

Ada yang bisa bantu saya?

Untuk memanggil fungsi pengontrol dalam lingkup induk dari dalam direktif lingkup isolasi, gunakan dash-separatednama atribut dalam HTML seperti kata OP.

Juga jika Anda ingin mengirim parameter ke fungsi Anda, panggil fungsi dengan mengirimkan objek:

<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

Mungkin saya kehilangan sesuatu, tetapi meskipun solusi lain memanggil fungsi lingkup induk tidak ada kemampuan untuk melewati argumen dari kode direktif, ini karena update-fnmemanggil updateFn()dengan parameter tetap, misalnya {msg: "Hello World"}. Sedikit perubahan memungkinkan arahan untuk mengeluarkan argumen, yang saya pikir jauh lebih berguna.

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

Perhatikan HTML melewati referensi fungsi, yaitu, tanpa ()tanda kurung.

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");
          }
        }
    }
});

Jadi di atas, HTML memanggil callUpdatefungsi lingkup lokal , yang kemudian 'mengambil' updateFn dari lingkup induk dan memanggil fungsi yang dikembalikan dengan parameter yang dapat dihasilkan oleh direktif.

http://jsfiddle.net/mygknek2/

Di tag Html directive 'test' Anda, nama atribut fungsi tidak boleh camelCased, tetapi berbasis dash.

jadi - bukannya:

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

menulis:

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

Ini adalah cara sudut untuk membedakan antara atribut direktif (seperti fungsi update-fn) dan fungsi.

Bagaimana dengan melewatkan fungsi pengontrol dengan pengikatan dua arah ? Kemudian Anda dapat menggunakannya dalam direktif persis dengan cara yang sama seperti pada template biasa (saya melucuti bagian yang tidak relevan untuk kesederhanaan):

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

Saya mendarat di pertanyaan ini, karena saya mencoba metode di atas befire, tetapi entah bagaimana itu tidak berhasil. Sekarang ini berfungsi dengan baik.

gunakan tanda hubung dan huruf kecil untuk nama atribut (seperti kata jawaban lain):

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

Dan gunakan "=" bukan "&" dalam ruang lingkup direktif:

 scope: { updateFn: '='}

Kemudian Anda dapat menggunakan updateFn seperti fungsi lainnya:

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

Ini dia!

Saya harus menggunakan "=" mengikat alih-alih "&" karena itu tidak berfungsi. Perilaku aneh.

@JorgeGRC Terima kasih atas jawaban Anda. Namun satu hal, bagian "mungkin" sangat penting. Jika Anda memiliki parameter, Anda harus memasukkannya di template Anda juga dan pastikan untuk menentukan lokal Anda misalnya updateFn({msg: "Directive Args"}.