Angular外部使用js调用Angular控制器中的函数方法或变量用法示例


Posted in Javascript onAugust 05, 2016

本文实例讲述了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>

在点击“调用”按钮之前效果如下图所示:

Angular外部使用js调用Angular控制器中的函数方法或变量用法示例

在点击“调用”按钮之后效果如下图所示:

Angular外部使用js调用Angular控制器中的函数方法或变量用法示例

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
javascript 对表格的行和列都能加亮显示
Dec 26 Javascript
jQuery autocomplete插件修改
Apr 17 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
Jvascript学习实践案例(开发常用)
Jun 25 Javascript
jquery如何实现锚点链接之间的平滑滚动
Dec 02 Javascript
js对象的复制继承实例
Jan 10 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
javascript如何实现360度全景照片问题汇总
Apr 04 Javascript
移动开发之自适应手机屏幕宽度
Nov 23 Javascript
VUE实现日历组件功能
Mar 13 Javascript
浅谈super-vuex使用体验
Jun 25 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
Aug 05 #Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 #Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 #Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
Aug 05 #Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
Aug 05 #Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
Aug 05 #Javascript
js从外部获取图片的实现方法
Aug 05 #Javascript
You might like
mysql 搜索之简单应用
2007/04/27 PHP
mysql总结之explain
2012/02/27 PHP
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
php文件上传的两种实现方法
2016/04/04 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
php mysql procedure实现获取多个结果集的方法【基于thinkPHP】
2016/11/09 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
PHP 判断字符串是中文还是英文, 或者是中英混合
2021/03/09 PHP
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
2013/10/09 Javascript
jQuery代码实现表格中点击相应行变色功能
2016/05/09 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
Angular 4依赖注入学习教程之简介(一)
2017/06/04 Javascript
使用Angular CLI生成 Angular 5项目教程详解
2018/03/18 Javascript
js实现点赞效果
2020/03/16 Javascript
taro 实现购物车逻辑的实例代码
2020/06/05 Javascript
python正则表达式抓取成语网站
2013/11/20 Python
python求众数问题实例
2014/09/26 Python
Python使用email模块对邮件进行编码和解码的实例教程
2016/07/01 Python
Python探索之SocketServer详解
2017/10/28 Python
Python os.access()用法实例
2019/02/18 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
python 实现矩阵按对角线打印
2019/11/29 Python
Python3开发实例之非关系型图数据库Neo4j安装方法及Python3连接操作Neo4j方法实例
2020/03/18 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
松本清官方海外旗舰店:日本最大的药妆连锁店
2017/11/21 全球购物
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
Fenty Beauty官网:蕾哈娜创立的美妆品牌
2021/01/07 全球购物
《邮票齿孔的故事》教学反思
2014/02/22 职场文书
企业年会主持词
2014/03/27 职场文书
体育系毕业生求职自荐信
2014/04/16 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
《赵州桥》教学反思
2016/02/17 职场文书
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL