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下阻止表单重复提交、防刷新、防后退
Aug 17 Javascript
Javascript valueOf 使用方法
Dec 28 Javascript
JS高级拖动技术 setCapture,releaseCapture
Jul 31 Javascript
回车直接实现点击某按钮的效果即触发单击事件
Feb 27 Javascript
基于jQuery的图片不完全按比例自动缩小
Jul 11 Javascript
JavaScript_object基础入门(必看篇)
Jun 13 Javascript
好好了解一下Cookie(强烈推荐)
Jun 14 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
Dec 14 Javascript
js判断一个字符串是以某个字符串开头的简单实例
Dec 27 Javascript
JavaScript 中的 this 工作原理
Jun 20 Javascript
JS实现密码框效果
Sep 10 Javascript
jQuery实现电梯导航模块
Dec 22 jQuery
使用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
PHP开发规范手册之PHP代码规范详解
2011/01/13 PHP
php使用gettimeofday函数返回当前时间并存放在关联数组里
2015/03/19 PHP
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
HTML5实现留言和回复页面样式
2015/07/22 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
使用jQuery监听DOM元素大小变化
2016/02/24 Javascript
setTimeout学习小结
2017/02/08 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
2017/04/11 jQuery
Node.js 使用request模块下载文件的实例
2018/09/05 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
python爬虫实战之最简单的网页爬虫教程
2017/08/13 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
树莓派实现移动拍照
2019/06/22 Python
Lombok插件安装(IDEA)及配置jar包使用详解
2020/11/04 Python
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
英国第一职业高尔夫商店:Clickgolf.co.uk
2020/11/18 全球购物
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
参观考察邀请函范文
2014/01/29 职场文书
公证委托书模板
2014/04/03 职场文书
捐献物资倡议书范文
2014/05/19 职场文书
新学期开学演讲稿
2014/05/24 职场文书
小学优秀教师材料
2014/12/15 职场文书
公司清洁工岗位职责
2015/04/15 职场文书
横空出世观后感
2015/06/09 职场文书
红色经典观后感
2015/06/18 职场文书
高中政治教学反思
2016/02/23 职场文书
2019年家电促销广告语集锦
2019/10/21 职场文书
redis实现排行榜功能
2021/05/24 Redis
python中os.path.join()函数实例用法
2021/05/26 Python
SpringBoot中获取profile的方法详解
2022/04/08 Java/Android