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 }
在點擊“調用”按鈕之前效果如下圖所示：
在點擊“調用”按鈕之後效果如下圖所示：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
