本文实例讲述了Angular外部使用js调用Angular控制器中的函数方法或变量。分享给大家供大家参考，具体如下：
<!DOCTYPE html> <html ng-app="myApp" id="myApp"> <head> <meta name="viewport" content="width=device-width" /> <title>Test</title> <script src="~/Content/Js/Plugins/AngularJS/angular.min.js"></script> </head> <body ng-controller="myController"> {{msg}} <a href="javascript:;" id="lbtnTest">调用</a> </body> </html> <script> var ngApp = angular.module('myApp', []); ngApp.controller('myController', function ($scope, $http) { $scope.msg = '你好，Angular！'; $scope.getData = function () { return 'qubernet'; } }); onload = function () { document.getElementById('lbtnTest').onclick = function () { //通过controller来获取Angular应用 var appElement = document.querySelector('[ng-controller=myController]'); //获取$scope变量 var $scope = angular.element(appElement).scope(); //调用msg变量，并改变msg的值 $scope.msg = '123456'; //上一行改变了msg的值，如果想同步到Angular控制器中，则需要调用$apply()方法即可 $scope.$apply(); //调用控制器中的getData()方法 console.log($scope.getData()); } } </script>
在点击“调用”按钮之前效果如下图所示：
在点击“调用”按钮之后效果如下图所示：
希望本文所述对大家AngularJS程序设计有所帮助。
您可能感兴趣的文章:
- 在html中引入外部js文件,并调用带参函数的方法
- HTML页面,测试JS对C函数的调用简单实例
- 基于js里调用函数时,函数名带括号和不带括号的区别
- 浅谈js中调用函数时加不加括号的问题
- 超链接怎么正确调用javascript函数
- javascript嵌套函数和在函数内调用外部函数的区别分析
- JavaScript实现同时调用多个函数的方法
- JavaScript函数的调用以及参数传递
- 深入学习 JavaScript中的函数调用
