快捷導(dǎo)航

Angular外部使用js調(diào)用Angular控制器中的函數(shù)方法或變量用法示例

更新時(shí)間：2016年08月05日 14:47:50 作者：Quber

這篇文章主要介紹了Angular外部使用js調(diào)用Angular控制器中的函數(shù)方法或變量用法,結(jié)合實(shí)例形式分析了Angular基于外部JS調(diào)用控制器中方法與變量的具體實(shí)現(xiàn)步驟與相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了Angular外部使用js調(diào)用Angular控制器中的函數(shù)方法或變量。分享給大家供大家參考，具體如下：

<!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">調(diào)用</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 () {
      //通過(guò)controller來(lái)獲取Angular應(yīng)用
      var appElement = document.querySelector('[ng-controller=myController]');
      //獲取$scope變量
      var $scope = angular.element(appElement).scope();
      //調(diào)用msg變量，并改變msg的值
      $scope.msg = '123456';
      //上一行改變了msg的值，如果想同步到Angular控制器中，則需要調(diào)用$apply()方法即可
      $scope.$apply();
      //調(diào)用控制器中的getData()方法
      console.log($scope.getData());
    }
  }
</script>

在點(diǎn)擊“調(diào)用”按鈕之前效果如下圖所示：

在點(diǎn)擊“調(diào)用”按鈕之后效果如下圖所示：

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

Angular2學(xué)習(xí)教程之TemplateRef和ViewContainerRef詳解
這篇文章主要給大家介紹了Angular2中TemplateRef和ViewContainerRef的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-05-05
Angular5中調(diào)用第三方j(luò)s插件的方法
下面小編就為大家分享一篇Angular5中調(diào)用第三方j(luò)s插件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
angular寫(xiě)一個(gè)列表的選擇全選交互組件的示例
本篇文章主要介紹了angular寫(xiě)一個(gè)列表的選擇全選交互組件的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-01-01
AngularJS中的按需加載ocLazyLoad示例
本篇文章主要介紹了AngularJS中的按需加載ocLazyLoad，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2017-01-01
Angular框架詳解之視圖抽象定義
這篇文章主要給大家介紹了關(guān)于Angular框架詳解之視圖抽象定義的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-04-04
Angular移動(dòng)端頁(yè)面input無(wú)法輸入的解決方法
下面小編就為大家?guī)?lái)一篇Angular移動(dòng)端頁(yè)面input無(wú)法輸入的解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-11-11
Angular中使用響應(yīng)式表單的詳細(xì)步驟
Angular提供了兩種處理表單的方式模板驅(qū)動(dòng)表單和響應(yīng)式表單（也稱(chēng)為模型驅(qū)動(dòng)表單）,使用模板驅(qū)動(dòng)表單時(shí),模板指令被用來(lái)構(gòu)建表單的內(nèi)部表示,在本文中,您探討了如何將響應(yīng)式表單應(yīng)用于一個(gè)示例 Angular 應(yīng)用程序
2024-02-02
angularjs自定義ng-model標(biāo)簽的屬性
這篇文章主要介紹了angularjs自定義ng-model標(biāo)簽的屬性的相關(guān)資料,需要的朋友可以參考下
2016-01-01
angularjs 源碼解析之injector
這篇文章主要介紹angular中實(shí)現(xiàn)依賴(lài)注入的”幕后英雄” — 注入器(Injector)。說(shuō)它是”幕后英雄”，是因?yàn)樗攀且蕾?lài)注入得以實(shí)現(xiàn)的主力。我們從源碼上來(lái)分析下他吧
2016-08-08
Angular 多級(jí)路由實(shí)現(xiàn)登錄頁(yè)面跳轉(zhuǎn)(小白教程)
這篇文章主要介紹了Angular 多級(jí)路由實(shí)現(xiàn)登錄頁(yè)面跳轉(zhuǎn)(小白教程)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11