AngularJS - truyền chức năng cho chỉ thị

Tôi có một ví dụ 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>

Tôi muốn khi tôi nhấp vào nút, hộp cảnh báo sẽ xuất hiện, nhưng không có gì hiển thị.

Ai giúp tôi với?

Để gọi một hàm điều khiển trong phạm vi cha từ bên trong một lệnh phạm vi cô lập, hãy sử dụng dash-separatedtên thuộc tính trong HTML như OP đã nói.

Ngoài ra nếu bạn muốn gửi một tham số cho hàm của mình, hãy gọi hàm bằng cách truyền một đối tượng:

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

Mã não

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

Có lẽ tôi đang thiếu một cái gì đó, nhưng mặc dù các giải pháp khác gọi hàm phạm vi cha, không có khả năng truyền đối số từ mã lệnh, ví dụ , điều này là do update-fnđang gọi updateFn()với các tham số cố định {msg: "Hello World"}. Một thay đổi nhỏ cho phép chỉ thị vượt qua các đối số, mà tôi nghĩ là hữu ích hơn nhiều.

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

Lưu ý rằng HTML đang truyền tham chiếu hàm, tức là không có () dấu ngoặc.

Mã não

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

Vì vậy, ở trên, HTML đang gọi phạm vi cục bộ callUpdate hàm , sau đó 'tìm nạp' updateFn từ phạm vi cha và gọi hàm trả về với các tham số mà lệnh có thể tạo.

http://jsfiddle.net/mygknek2/

Trong thẻ Html chỉ thị 'test' của bạn, tên thuộc tính của hàm không được camelCase, mà dựa trên dấu gạch ngang.

vì vậy - thay vì:

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

viết:

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

Đây là cách của góc để nói sự khác biệt giữa các thuộc tính chỉ thị (chẳng hạn như hàm update-fn) và các hàm.

Làm thế nào về việc vượt qua chức năng điều khiển với ràng buộc hai chiều ? Sau đó, bạn có thể sử dụng nó trong chỉ thị chính xác giống như trong một mẫu thông thường (Tôi đã loại bỏ các phần không liên quan để đơn giản):

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

Tôi đáp xuống câu hỏi này, vì tôi đã thử phương pháp trên befire, nhưng bằng cách nào đó nó không hoạt động. Bây giờ nó hoạt động hoàn hảo.

sử dụng dấu gạch ngang và chữ thường cho tên thuộc tính (như các câu trả lời khác đã nói):

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

Và sử dụng "=" thay vì "&" trong phạm vi chỉ thị:

 scope: { updateFn: '='}

Sau đó, bạn có thể sử dụng updateFn như bất kỳ chức năng nào khác:

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

Có bạn đi!

Tôi đã phải sử dụng liên kết "=" thay vì "&" vì điều đó không hoạt động. Hành vi kỳ lạ.

@JorgeGRC Cảm ơn câu trả lời của bạn. Mặc dù vậy, một điều "có thể" là rất quan trọng. Nếu bạn có (các) tham số, bạn cũng phải đưa nó vào mẫu của mình và chắc chắn chỉ định địa phương của bạn, vd updateFn({msg: "Directive Args"}.