AngularJS - fonksiyonu yönergelere geçirir

Bir örnek açısalJS var

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

Düğmeye tıkladığımda istiyorum, uyarı kutusu görünecek, ancak hiçbir şey görünmüyor.

Biri bana yardım edebilir mi?

Bir yalıtkan kapsam yönergesi içinden üst kapsamdaki denetleyici işlevini çağırmak için dash-separated, HTML'de OP'nin belirttiği gibi öznitelik adlarını kullanın .

Ayrıca işlevinize bir parametre göndermek istiyorsanız, bir nesneyi ileterek işlevi çağırın:

<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

Belki bir şey eksik, ama diğer çözümler üst kapsam işlevini çağırmak rağmen, yönerge kodundan argümanlar geçirme yeteneği yoktur, bunun nedeni, örneğin sabit parametrelerle update-fnçağırıyor . Küçük bir değişiklik, direktifin çok daha yararlı olduğunu düşündüğüm argümanları iletmesine izin verir.updateFn(){msg: "Hello World"}

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

HTML'nin bir işlev başvurusunu, yani ()köşeli ayraç olmadan geçtiğini unutmayın .

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

Dolayısıyla, yukarıda, HTML yerel kapsam callUpdateişlevini çağırıyor , bu da daha sonra updateFn'yi üst kapsamdan 'alıyor' ve döndürülen işlevi yönergelerin üretebileceği parametrelerle çağırıyor.

http://jsfiddle.net/mygknek2/

'Test' yönergesi Html etiketinizde, işlevin öznitelik adı camelCased değil , tire temelli olmalıdır.

yani - yerine:

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

yazmak:

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

Bu açısalın yönerge nitelikleri (update-fn fonksiyonu gibi) ve fonksiyonlar arasındaki farkı anlatmanın bir yoludur.

Denetleyici işlevini çift ​​yönlü ciltleme ile geçirmeye ne dersiniz ? Daha sonra yönergede normal bir şablonda olduğu gibi kullanabilirsiniz (basitlik için alakasız parçaları çıkardım):

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

Bu soruya indim, çünkü yukarıdaki yöntemi befire denedim, ama bir şekilde işe yaramadı. Şimdi mükemmel çalışıyor.

özellik adı için tire ve küçük harf kullanın (diğer yanıtların söylediği gibi):

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

Ve yönerge kapsamında "&" yerine "=" kullanın:

 scope: { updateFn: '='}

Ardından updateFn'i diğer işlevler gibi kullanabilirsiniz:

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

İşte böyle!

Bu çalışma değildi çünkü "&" yerine "&" yerine kullanmak zorunda kaldı. Garip davranış.

@JorgeGRC Cevabınız için teşekkürler. Bir şey olsa da, "belki" kısmı çok önemlidir. Parametre (s) varsa, size şablonu o / onları yanı kapsam içine almak ve belirtmek için emin olmalıdır yerliler örn updateFn({msg: "Directive Args"}.