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 相关文章推荐
禁止JQuery中的load方法装载IE缓存中文件的方法
Sep 11 Javascript
JS格式化数字保留两位小数点示例代码
Oct 15 Javascript
js的alert样式如何更改如背景颜色
Jan 22 Javascript
js图片模糊切换显示特效的方法
Feb 17 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
Mar 05 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
ajax与json 获取数据并在前台使用简单实例
Jan 19 Javascript
js选项卡的制作方法
Jan 23 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
Sep 30 Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
详解element-ui设置下拉选择切换必填和非必填
Jun 17 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
php $_SERVER当前完整url的写法
2009/11/12 PHP
php判断电脑访问、手机访问的例子
2014/05/10 PHP
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
javascript encodeURI和encodeURIComponent的比较
2010/04/03 Javascript
基于jQuery的左右滚动实现代码
2010/12/03 Javascript
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
使用javascript控制cookie显示和隐藏背景图
2014/02/12 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
2015/12/12 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
详解Vue-axios 设置请求头问题
2018/12/06 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
layui.tree组件的使用以及搜索节点功能的实现
2019/09/26 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
antd-日历组件,前后禁止选择,只能选中间一部分的实例
2020/10/29 Javascript
微信小程序自定义tabBar的踩坑实践记录
2020/11/06 Javascript
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
在Pandas中DataFrame数据合并,连接(concat,merge,join)的实例
2019/01/29 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
Python enumerate内置库用法解析
2020/02/24 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
澳大利亚领先的在线机械五金、园艺和存储专家:Edisons
2018/03/24 全球购物
JustFab加拿大:女鞋、靴子、手袋和服装在线
2018/05/18 全球购物
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
改作风抓落实促发展心得体会
2014/09/10 职场文书
教师个人考察材料
2014/12/16 职场文书
神农溪导游词
2015/02/11 职场文书
文艺晚会开场白
2015/05/29 职场文书
Html5通过数据流方式播放视频的实现
2021/04/27 HTML / CSS