Html代碼如下所示：
1 <!DOCTYPE html> 2 <html ng-app="myApp" id="myApp"> 3 <head> 4 <meta name="viewport" content="width=device-width" /> 5 <title>Test</title> 6 <script src="~/Content/Js/Plugins/AngularJS/angular.min.js"></script> 7 </head> 8 <body ng-controller="myController"> 9 {{msg}} 10 <a href="javascript:;" id="lbtnTest">調用</a> 11 </body> 12 </html>
JavaScript代碼如下所示：
1 var ngApp = angular.module('myApp', []); 2 ngApp.controller('myController', function ($scope, $http) { 3 $scope.msg = '你好，Angular！'; 4 $scope.getData = function () { 5 return 'qubernet'; 6 } 7 }); 8 9 onload = function () { 10 document.getElementById('lbtnTest').onclick = function () { 11 //通過controller來獲取Angular應用 12 var appElement = document.querySelector('[ng-controller=myController]'); 13 //獲取$scope變量 14 var $scope = angular.element(appElement).scope(); 15 16 //調用msg變量，並改變msg的值 17 $scope.msg = '123456'; 18 //上一行改變了msg的值，如果想同步到Angular控制器中，則需要調用$apply()方法即可 19 $scope.$apply(); 20 //調用控制器中的getData()方法 21 console.log($scope.getData()); 22 } 23 }
在點擊“調用”按鈕之前效果如下圖所示：
在點擊“調用”按鈕之后效果如下圖所示：
