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

Отже, у вищесказаному, HTML викликає callUpdateфункцію локальної області застосування , яка потім 'виймає' updateFn з батьківської області та викликає повернуту функцію з параметрами, які може генерувати директива.

http://jsfiddle.net/mygknek2/

У вашій тезі Html директива 'test', назва атрибута функції не повинна бути camelCrozen, а на основі тире.

так - замість:

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

Я приземлився на це питання, тому що я спробував метод вище befire, але якось не вийшло. Зараз це прекрасно працює.

використовувати тире та малі регістри для атрибутів (як і інші відповіді):

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

І використовуйте "=" замість "&" в області директив:

 scope: { updateFn: '='}

Тоді ви можете використовувати updateFn, як і будь-яку іншу функцію:

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

Ось так!

Мені довелося використовувати прив'язку "=" замість "&", тому що це не працює. Дивна поведінка.

@JorgeGRC Дякуємо за вашу відповідь. Одне, однак, "можливо" частина є дуже важливою. Якщо у вас є параметри, ви повинні також включити їх / їх у свій шаблон і обов'язково вказати місцевих жителів, наприклад updateFn({msg: "Directive Args"}.