Gọi Angular JS từ JavaScript
Dùng Angular để lập trình ra những ứng dụng SPA (Single Page Application) là một điều tuyệt vời. Tuy nhiên, chúng ta đôi khi cần gọi Angular từ JavaScript thuần túy. Ví dụ như trong controller chúng ta có một hàm hello, chúng ta cần gọi nó trong JavaScript thuần túy. OK! có vẻ hơi lằng nhằng. ...
Dùng Angular để lập trình ra những ứng dụng SPA (Single Page Application) là một điều tuyệt vời. Tuy nhiên, chúng ta đôi khi cần gọi Angular từ JavaScript thuần túy. Ví dụ như trong controller chúng ta có một hàm hello, chúng ta cần gọi nó trong JavaScript thuần túy.
OK! có vẻ hơi lằng nhằng. Chúng ta cần một ví dụ để làm rõ hơn vấn đề.
Trước hết, chúng ta có một có một cần controller như sau:
function MyCtrl($scope) {
$scope.hello = function () {
alert("Hello");
}
}
Và một html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="AngularLab">
<head>
<title>Angular Lab</title>
<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="Scripts/angular.min.js"></script>
<script type="text/javascript" src="Scripts/app.js"></script>
<script type="text/javascript" src="Scripts/controllers.js"></script>
<script type="text/javascript">
function test() {
}
</script>
</head>
<body>
<div ng-controller="MyCtrl">
<div id="mydiv" ></div>
</div>
<input type="button" id="btn" value="Click me!" onclick="test()" />
</body>
</html>
Các bạn nhìn vào html document chúng ta sẽ có:
– Một cái nút: nút này sẽ gọi hàm test, hiện tại hàm này chúng ta đang để trống, chúng ta sẽ gọi hàm hello của MyCtrl từ hàm test này
– Một thể div với id là mydiv, div này nằm trong “khu vực” của controller MyCtrl
Và câu hỏi đặt ra là chúng ta cần gọi hàm hello của controller MyCtrl từ JavaScript thuần túy thì làm thế nào ?
Đề gọi được hàm hello của controller MyCtrl thì chúng ta sử dụng công thức chung như sau:
angular.element(domElement).scope()
Cụ thể trong trường hợp chúng ta là
angular.element("#mydiv").scope().hello()
Với câu lệnh trên, chúng ta truy xuất vào “khu vực” hay scope của thể div có id là mydiv, khi đó chúng ta có được scope, tới đây chúng ta thoải mái gọi các behavior hoặc là property của nó.
Vậy cuối cùng thì hàm test của chúng ta sẽ như sau:
function test() {
angular.element("#mydiv").scope().hello();
}
Hết. Tham khảo thêm tại http://stackoverflow.com/questions/10490570/call-angular-js-from-legacy-code
