Angular外部使用js调用Angular控制器中的函数方法或变量用法示例  更新时间:2016年08月05日 14:47:50   作者:Quber   这篇文章主要介绍了Angular外部使用js调用Angular控制器中的函数方法或变量用法,结合实例形式分析了Angular基于外部JS调用控制器中方法与变量的具体实现步骤与相关技巧,需要的朋友可以参考下 本文实例讲述了Angular外部使用js调用Angular控制器中的函数方法或变量。分享给大家供大家参考,具体如下: Test {{msg}} 调用 在点击“调用”按钮之前效果如下图所示: 在点击“调用”按钮之后效果如下图所示: 希望本文所述对大家AngularJS程序设计有所帮助。 您可能感兴趣的文章: 在html中引入外部js文件,并调用带参函数的方法 HTML页面,测试JS对C函数的调用简单实例 基于js里调用函数时,函数名带括号和不带括号的区别 浅谈js中调用函数时加不加括号的问题 超链接怎么正确调用javascript函数 javascript嵌套函数和在函数内调用外部函数的区别分析 JavaScript实现同时调用多个函数的方法 JavaScript函数的调用以及参数传递 深入学习 JavaScript中的函数调用 Angular 控制器 相关文章 Angularjs实现mvvm式的选项卡示例代码 每位Web开发者应该都知道,选项卡是现代web网页中最常用的效果之一,所以本文重点是用angularjs这个非常火mvvm框架,实现选项卡效果。有需要的朋友们可以参考借鉴,下面来一起看看吧。 2016-09-09 浅谈angularJS的$watch失效问题的解决方案 本篇文章主要介绍了浅谈angularJS的$watch失效问题的解决方案,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。 2017-08-08 解决Angularjs异步操作后台请求用$q.all排列先后顺序问题 解决Angularjs异步操作后台请求用$q.all排列先后顺序问题,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 2019-11-11 Angularjs中的$apply及优化使用详解 angular js的双向数据绑定,在开发中起到的作用灰常大,所以下面这篇文章主要给大家介绍了关于Angularjs中$apply及优化使用的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧 2018-07-07 详解AngularJS用Interceptors来统一处理HTTP请求和响应 本篇文章主要介绍了AngularJS用Interceptors来统一处理HTTP请求和响应 ,具有一定的参考价值,有兴趣的可以了解一下 2017-06-06 Angularjs为ng-click事件传递参数 这篇文章主要介绍了Angularjs为ng-click事件传递参数的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下 2017-06-06 angularjs的一些优化小技巧 这篇文章主要介绍了angularjs的一些优化小技巧,本文总结了5种优化技巧,如一次绑定、尽可能少调用 ng-repeat、尽量在指令里写原生语法、页面内尽量少用filters等,需要的朋友可以参考下 2014-12-12 Augularjs-起步详解 下面小编就为大家带来一篇Augularjs-起步详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2016-07-07 AngularJS 中的事件详解 本文主要介绍AngularJS 事件,这里整理了相关资料,比较详细的介绍了AngularJS的使用方法,有需要的小伙伴参考下 2016-07-07 详解Angular路由动画及高阶动画函数 本文主要讲解了Angular的路由动画和高阶动画函数,对此感兴趣的同学,可以把代码亲自实验一下,理解其原理。 2021-05-05 最新评论

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

  • 在html中引入外部js文件,并调用带参函数的方法
  • HTML页面,测试JS对C函数的调用简单实例
  • 基于js里调用函数时,函数名带括号和不带括号的区别
  • 浅谈js中调用函数时加不加括号的问题
  • 超链接怎么正确调用javascript函数
  • javascript嵌套函数和在函数内调用外部函数的区别分析
  • JavaScript实现同时调用多个函数的方法
  • JavaScript函数的调用以及参数传递
  • 深入学习 JavaScript中的函数调用
张贴在3