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/

ในแท็กคำสั่ง 'ทดสอบ' ของคุณชื่อแอตทริบิวต์ของฟังก์ชันไม่ควรเป็น 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>

และใช้ "=" แทน "&" ในขอบเขต directive:

 scope: { updateFn: '='}

จากนั้นคุณสามารถใช้ updateFn เหมือนฟังก์ชั่นอื่น ๆ :

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

ไปแล้ว!

ฉันต้องใช้การผูก "=" แทนที่จะเป็น "&" เพราะนั่นไม่ทำงาน พฤติกรรมแปลก ๆ

@ JorgeGRC ขอบคุณสำหรับคำตอบของคุณ แม้ว่าสิ่งหนึ่งส่วน "บางที" มีความสำคัญมาก หากคุณมีพารามิเตอร์ (s) คุณต้องมีมัน / พวกเขาในแม่แบบของคุณได้เป็นอย่างดีและให้แน่ใจว่าคุณระบุชาวบ้านupdateFn({msg: "Directive Args"}เช่น