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程序设计有所帮助。
相关文章
Angular使用ng-messages与PHP进行表单数据验证
这篇文章主要介绍了Angular使用ng-messages与PHP进行表单数据验证，ng-messages提供了更方便的表单数据验证服务，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
angular+ionic 的app上拉加载更新数据实现方法
这篇文章主要介绍了angular+ionic 的app上拉加载更新数据实现方法，需要的的朋友参考下2017-01-01
这篇文章主要介绍了详解使用angular框架离线你的应用（pwa指南），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
在Angular的原生指令中有这几个指令用来控制元素的展示与否，ng-show/ng-hide/ng-if和ng-switch。在angular性能优化中，我们也常常会用到它。这篇文章主要给大家介绍了在Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程，需要的朋友可以参考。2017-05-05
这篇文章主要介绍了AngularJS自定义控件,结合实例形式详细分析了AngularJS自定义指令与模板操作的相关函数与使用技巧,需要的朋友可以参考下2016-12-12
AngularJS是google在维护，其在国外已经十分火热，可是国内的使用情况却有不小的差距，参考文献/网络文章也很匮乏。下面这篇文章主要给大家介绍了关于Angular.js中数组操作的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。2017-07-07
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
下面小编就为大家带来一篇完美解决UI-Grid表格元素中多个空格显示为一个空格的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
这篇文章主要介绍了详解Angular6学习笔记之主从组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了angular中$state.go页面跳转并传递参数的方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-05-05
下面小编就为大家带来一篇AngularJS 购物车全选/取消全选功能的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
最新评论