Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
更新时间：2016年08月05日 14:47:50 作者：Quber
这篇文章主要介绍了Angular外部使用js调用Angular控制器中的函数方法或变量用法,结合实例形式分析了Angular基于外部JS调用控制器中方法与变量的具体实现步骤与相关技巧,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
几乎每个web应用都会用到表单，那么验证器就是必不可少的东西，这篇文章主要介绍了angular 实现同步验证器跨字段验证的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-04-04
这篇文章主要介绍了Angular开发实践之服务端渲染，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
ionic4+angular7+cordova上传图片功能的实例代码
ionic是一个垮平台开发框架，可通过web技术开发出多平台的应用。这篇文章主要介绍了ionic4+angular7+cordova上传图片功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-06-06
Angular.js组件之input mask对input输入进行格式化详解
这篇文章主要给大家介绍了关于Angular.js组件之input mask对input输入进行格式化的相关内容，文中通过示例代码详细介绍了将银行卡号和日期的方法，需要的朋友们可以参考借鉴，下面来一起看看吧。2017-07-07
这篇文章主要介绍了浅谈Angular路由守卫,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要介绍了angularjs自定义过滤器,结合完整实例形式分析了angularjs自定义过滤器相关原理、使用方法及操作注意事项,需要的朋友可以参考下2019-08-08
AngularJS使用ngOption实现下拉列表的实例代码
这篇文章主要介绍了AngularJS使用ngOption实现下拉列表的实例代码的相关资料,需要的朋友可以参考下2016-01-01
这篇文章主要介绍了Angularjs中ng-repeat的简单实例的相关资料,这里提供两个实例方法帮助大家彻底掌握这部分内容，需要的朋友可以参考下2017-08-08
这篇文章主要给大家总结了一些关于Angular4 中入门常用的指令，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来跟着小编一起学习学习吧。2017-06-06
本篇文章主要介绍了AngularJs实现基于角色的前端访问控制，可以适用于不同的角色，有需要的可以了解一下。2016-11-11
最新评论