Thursday 22 November 2012

วิธีการเรียกใช้งาน Controller จาก Script ภายนอก ใน Angular.js

โดยปกติเราสามารถเรียกใช้งาน Controller ได้โดยผ่านการ Binding แต่สำหรับในกรณีที่เรามีความจำเป็นต้องเรียกใช้งาน property หรือ method ที่อยู่ภายใน Controller จาก Script ที่อยู่ภายนอก ซึ่งเราไม่สามารถใช้วิธีการ binding ได้ เราสามารถทำโดยการเรียกใช้งานผ่าน scope โดยตรง ซึ่ง โดยปกติ Angular จะสร้าง scope Object ไว้กับ Element ที่เราประกาศให้เป็น Controller ซึ่งเราสามารถดึงเอา Scope Object ออกมาใช้งานได้ดังต่อไปนี้

ตัวอย่างของ Code ในส่วนของ Controller

function HelloCtrl($scope){
    $scope.title = 'Hello!';
    $scope.test = function(){
        alert('xxx');
    }
}

สมมุติว่า ประกาศ controller ไว้ที่ body tag ดังนี้

<html ng-app>
<body ng-controller="HelloCtrl">
</body>
</html>

เราสามารถดึง scope object ออกมาจาก body tag ได้ดังนี้

var scope = angular.element($('body')).scope();

จากนั้น เมื่อเราได้ scope object ออกมาแล้ว เราก็จะสามารถเรียกใช้งาน property และ method ที่อยู่ภายใน controller ได้ตามปกติ ยกตัวอย่างเช่น

alert(scope.title);  // เรียกใช้งาน property ที่ชื่อว่า title
scope.test(); // เรียกใช้งาน method ที่ชื่อว่า test

No comments:

Post a Comment