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

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

赞 (0)

相关推荐

  • 浅谈js中调用函数时加不加括号的问题

    其实总结起来如下: 函数只要是要调用它进行执行的,都必须加括号.此时,函数()实际上等于函数的返回值.当然,有些没有返回值,但已经执行了函数体内的行为,这个是根本,就是说,只要加括号的,就代表将会执行函数体代码. 不加括号的,都是把函数名称作为函数的指针,用于传参,此时不是得到函数的结果,因为不会运行函数体代码.它只是传递了函数体所在的地址位置,在需要的时候好找到函数体去执行. 所以一般时候我们都是采用的是无括号的原因.这也是由于括号的二义性,因为括号是"函数调用运算符",相当于在执行

  • 在html中引入外部js文件,并调用带参函数的方法

    在html中引入外部js文件,并调用带参函数的方法

    在html中引入外部js文件,并调用js文件中的带参函数 1 项目结构 2 编写a.js.test.html //a.js function abc(str){ alert(str); } //test.html <html> <head> <script type="text/javascript" src="a.js"></script> <script type="text/javascript&

  • 基于js里调用函数时,函数名带括号和不带括号的区别

    示例代码: <span style="font-size:18px;">function hi(){ var a = 1; return function(){ console.log(a++); }; }; var aaa = hi(); var bbb = hi; </span> 如以上代码: aaa 是将 hi() 的运行结果赋值给它,即 return 返回的匿名函数,此时有一个闭包,则每次调用 aaa 时都访问的同一个 a,aaa() 第一次运行结果为

  • HTML页面,测试JS对C函数的调用简单实例

    这里记一下,以后要用的时候可以查! <HTML> <HEAD> <META NAME="GENERATOR" Content="Microsoft Visual Studio"> <meta http-equiv="content-type" content="text/html;charset=gbk"> <TITLE>HTML页面,测试JS对C函数的调用</

  • javascript嵌套函数和在函数内调用外部函数的区别分析

    我们都知道在函数中定义的局部变量在声明他的函数体以及其嵌套的函数内始终是有定义的,并且在函数的作用域链上始终会有个对象指向全局对象,使函数能够访问到全局变量. var ga = 'global'; var func = function() { var la = 'local'; return function() { return function() { return function() { alert(la);alert(ga); } } } } a = func(); a()()();

  • 深入学习 JavaScript中的函数调用

    定义 可能很多人在学习 JavaScript 过程中碰到过函数参数传递方式的迷惑,本着深入的精神,我想再源码中寻找些答案不过在做这件事之前,首先明确几个概念.抛弃掉值传递.引用传递等固有叫法,回归英文: call by reference && call by value && call by sharing 分别是我们理解的 C++ 中的引用传递,值传递.第三种比较迷惑,官方解释是 receives the copy of the reference to object

  • JavaScript实现同时调用多个函数的方法

    本文实例讲述了JavaScript实现同时调用多个函数的方法.分享给大家供大家参考,具体如下: 这里分析JavaScript 同时调用同一网页内的多个函数的实现方法,点击按钮后执行多次函数,比如连续弹出多次窗口. 具体代码如下: <html> <head> <title>同时调用多个函数</title> <script language="javascript"> <!-- function fun1(){ alert(

  • 超链接怎么正确调用javascript函数

    点击超链接调用 JavaScript 函数,一般人都用: 复制代码 代码如下: <a href="javascript:function();"> 但这有个缺点,就是点击链接后,页面上的GIF动画将静止. 试看如下代码: 复制代码 代码如下: <script type="text/javascript"> <!-- function Foo() {     //do something } //--> </script>

  • JavaScript函数的调用以及参数传递

    JavaScript 函数调用 JavaScript 函数有 4 种调用方式. 每种方式的不同方式在于 this 的初始化. this 关键字 一般而言,在Javascript中,this指向函数执行时的当前对象. Note 注意 this 是保留关键字,你不能修改 this 的值. 调用 JavaScript 函数 函数中的代码在函数被调用后执行. 作为一个函数调用 实例 function myFunction(a, b) { return a * b; } myFunction(10, 2)

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

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

    本文实例讲述了Angular外部使用js调用Angular控制器中的函数方法或变量.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app="myApp" id="myApp"> <head> <meta name="viewport" content="width=device-width" /> <title>Test</

  • 简述angular自定义过滤器在页面和控制器中的使用

    AngularJS另一个特点就是提供了过滤器,可以通过操作UNIX下管道的方式,操作数据结果. 通过使用管道,可以便于双向的数据绑定中视图的展现. 过滤器在处理过程中,将数据变成新的格式,而且可以使用管道这种链式风格,还能接受附加的参数. 首先设置自定义过滤器. 定义模块名:angular .module('myApp') .filter('filterName',function(){ return function(要过滤的对象,参数1,参数2,...){ return Obj; //这里返

  • 浅谈js中同名函数和同名变量的执行问题

    经测试未写成闭包形式的在同一个文件中或者不同的 js 文件中定义的同名函数,调用时会执行后面一个定义的函数.即使这样写也会执行后面一个即会弹出2: <script type="text/javascript"> function t(){ alert(1); } t(); function t(){ alert(2); } </script> 另外,定义的变量与css样式也是以后面的为准. 但是对于函数,经测试这样写却会执行前面的函数直接量即弹出1,暂时不知道是

  • 深入理解js 中async 函数的含义和用法

    一.终极解决 异步操作是 JavaScript 编程的麻烦事,麻烦到一直有人提出各种各样的方案,试图解决这个问题. 从最早的回调函数,到 Promise 对象,再到 Generator 函数,每次都有所改进,但又让人觉得不彻底.它们都有额外的复杂性,都需要理解抽象的底层运行机制. 异步I/O不就是读取一个文件吗,干嘛要搞得这么复杂?异步编程的最高境界,就是根本不用关心它是不是异步. async 函数就是隧道尽头的亮光,很多人认为它是异步操作的终极解决方案. 二.async 函数是什么? 一句话,

  • JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法

    本文实例讲述了JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法.分享给大家供大家参考,具体如下: 主页面: <script type="text/javascript"> function SelectGroupCust() { var temp = window.showModalDialog("Default2.aspx?xx=" + Date(), "", "dialog

  • 详解C++调用Python脚本中的函数的实例代码

    1.环境配置 安装完python后,把python的include和lib拷贝到自己的工程目录下 然后在工程中包括进去 2.例子 先写一个python的测试脚本,如下 这个脚本里面定义了两个函数Hello()和_add().我的脚本的文件名叫mytest.py C++代码: #include "stdafx.h" #include <stdlib.h> #include <iostream> #include "include\Python.h&quo

  • Python实现调用另一个路径下py文件中的函数方法总结

    Python实现调用另一个路径下py文件中的函数方法总结

    本文实例讲述了Python实现调用另一个路径下py文件中的函数方法.分享给大家供大家参考,具体如下: 针对这个问题,网上有很多的解决方式.其实最主要的原因是因为Python无法正确找到你其他文件夹下文件的路径.针对不同的环境和问题有不同的方法,大家可自行测试. 1. 方法一 首先,我先把解决我本人问题的方法记录如下.环境,Python为3.5,pycharm工作区间.主文件(main_preprocess.py)需要运用split_by_date.py中的函数,main_preprocess与s

  • python如何调用php文件中的函数详解

    python如何调用php文件中的函数详解

    前言 python调用php代码实现思路:php文件可通过在terminal中使用php命令行进行调用,因此可使用python开启子进程执行命令行代码.函数所需的参数可通过命令行传递. 测试环境 1.操作系统:macos10.13.2 2.php版本:PHP 7.1.7(mac自带) 3.python版本:python3.6.0 4.python库:subprocess 调用php函数 php命令行调用php文件中的函数 php文件:test_hello.php <?php function h

  • 基于Matplotlib 调用 pyplot 模块中 figure() 函数处理 figure图形对象

    基于Matplotlib 调用 pyplot 模块中 figure() 函数处理 figure图形对象

    在 Matplotlib 中,面向对象编程的核心思想是创建图形对象(figure object).通过图形对象来调用其它的方法和属性,这样有助于我们更好地处理多个画布.在这个过程中,pyplot 负责生成图形对象,并通过该对象来添加一个或多个 axes 对象(即绘图区域). Matplotlib 提供了matplotlib.figure图形类模块,它包含了创建图形对象的方法.通过调用 pyplot 模块中 figure() 函数来实例化 figure 对象. 如下所示: from matplot

  • C++中静态成员函数与静态成员变量（static ）

    C++中静态成员函数与静态成员变量(static ) 这篇介绍了静态成员函数与静态成员变量,是我的读书笔记,我希望它够简短但又比较全面,起到复习的作用.如果有一些C++知识记不清楚了,它可以帮你很快回忆起来. 复习C语言的static关键字 (1)加在局部变量的前面使之成为静态局部变量,作用域还是在函数内部,可是生存周期延长了. (2)加在全局变量的前面限定该变量作用域为文件作用域,就是说即使其他文件使用了extern扩展作用域也不行.这在C语言的多人项目中非常有用,避免了变量的重名.然而在C+

随机推荐