AngularJS - передать функцию в директиву

У меня есть пример 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>

Я хочу, чтобы при нажатии кнопки появлялось окно с предупреждением, но ничего не показывалось.

Может кто-нибудь помочь мне?

Чтобы вызвать функцию контроллера в родительской области изнутри директивы изолирующей области, используйте dash-separatedимена атрибутов в HTML, как указано в OP.

Также, если вы хотите отправить параметр в вашу функцию, вызовите функцию, передав объект:

<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

Возможно, я чего-то упускаю, но хотя другие решения действительно вызывают функцию родительского контекста, нет возможности передавать аргументы из кода директивы, это потому, что update-fn, например, вызывается updateFn()с фиксированными параметрами {msg: "Hello World"}. Небольшое изменение позволяет директиве передавать аргументы, что я считаю гораздо более полезным.

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

Обратите внимание, что HTML передает ссылку на функцию, т.е. без ()скобок.

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

Таким образом, в приведенном выше callUpdateпримере HTML вызывает локальную функцию области, которая затем «выбирает» updateFn из родительской области и вызывает возвращенную функцию с параметрами, которые может сгенерировать директива.

http://jsfiddle.net/mygknek2/

В вашем HTML-теге директивы test имя атрибута функции не должно быть camelCased, а основано на дефисе.

так что вместо:

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

записывать:

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

Это угловой способ определить разницу между атрибутами директивы (такими как функция update-fn) и функциями.

Как насчет передачи функции контроллера с двунаправленной привязкой ? Затем вы можете использовать его в директиве точно так же, как и в обычном шаблоне (для простоты я удалил ненужные части):

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

Я приземлился на этот вопрос, потому что я попробовал описанный выше метод, но как-то это не сработало. Теперь это работает отлично.

используйте тире и нижний регистр для имени атрибута (как сказали другие ответы):

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

И используйте «=» вместо «&» в директиве:

 scope: { updateFn: '='}

Тогда вы можете использовать updateFn как любую другую функцию:

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

Вот и вы!

Мне пришлось использовать привязку "=" вместо "&", потому что это не сработало. Странное поведение.

@JorgeGRC Спасибо за ваш ответ. Одна вещь, хотя, «возможно», часть очень важна. Если у вас есть параметр (ы), вы должны также включить его / их в свой шаблон и обязательно указать свои местные жители, например updateFn({msg: "Directive Args"}.