本文主要包含angular js,angular ui router.js,angular.js下载,angular js菜鸟教程,angular.js官网等相关知识,Quber 希望在学习及工作中可以帮助到您
本文实例讲述了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>
</div>
在点击“调用”按钮之前效果如下图所示：
在点击“调用”按钮之后效果如下图所示：
希望本文所述对大家AngularJS程序设计有所帮助。
</div>您可能想查找下面的文章:
- angular directive的简单使用总结
- 详解Angular路由 ng-route和ui-router的区别
- 详解Angular2中Input和Output用法及示例
- Angular.JS中的this指向详解
- 详解如何在Angular中快速定位DOM元素
- Angular中$state.go页面跳转并传递参数的方法
- Angular.Js中过滤器filter与自定义过滤器filter实例详解
- Angular.JS内置服务$http对数据库的增删改使用教程
- Angular2中select用法之设置默认值与事件详解
- Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程