Angular外部使用js調(diào)用Angular控制器中的函數(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 () { //通過controller來獲取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ào)用”按鈕之前效果如下圖所示:
在點擊“調(diào)用”按鈕之后效果如下圖所示:
希望本文所述對大家AngularJS程序設(shè)計有所幫助。
- 在html中引入外部js文件,并調(diào)用帶參函數(shù)的方法
- HTML頁面,測試JS對C函數(shù)的調(diào)用簡單實例
- 基于js里調(diào)用函數(shù)時,函數(shù)名帶括號和不帶括號的區(qū)別
- 淺談js中調(diào)用函數(shù)時加不加括號的問題
- 超鏈接怎么正確調(diào)用javascript函數(shù)
- javascript嵌套函數(shù)和在函數(shù)內(nèi)調(diào)用外部函數(shù)的區(qū)別分析
- JavaScript實現(xiàn)同時調(diào)用多個函數(shù)的方法
- JavaScript函數(shù)的調(diào)用以及參數(shù)傳遞
- 深入學習 JavaScript中的函數(shù)調(diào)用
相關(guān)文章
Angular 實現(xiàn)輸入框中顯示文章標簽的實例代碼
這篇文章主要介紹了Angular 實現(xiàn)輸入框中顯示文章標簽的實例代碼,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11Angular應(yīng)用Bootstrap過程步驟邏輯詳解
這篇文章主要為大家介紹了Angular應(yīng)用Bootstrap過程步驟邏輯詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-07-07angular 用攔截器統(tǒng)一處理http請求和響應(yīng)的方法
下面小編就為大家?guī)硪黄猘ngular 用攔截器統(tǒng)一處理http請求和響應(yīng)的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-06-06實例詳解AngularJS實現(xiàn)無限級聯(lián)動菜單
這篇文章主要介紹了實例詳解AngularJS實現(xiàn)無限級聯(lián)動菜單的相關(guān)資料,需要的朋友可以參考下2016-01-01AngularJS基礎(chǔ) ng-repeat 指令簡單示例
本文主要講解AngularJS ng-repeat 指令,這里對ng-repeat的基礎(chǔ)資料做了整理,并附有示例代碼,有興趣的朋友可以參考下2016-08-08AngularJS實現(xiàn)單獨作用域內(nèi)的數(shù)據(jù)操作
這篇文章給大家介紹了利用AngularJs如何實現(xiàn)ng-repeat內(nèi)各個小的子作用域單獨數(shù)據(jù)綁定。有需要的小伙伴們可以參考借鑒,下面來一起看看吧。2016-09-09Angular中實現(xiàn)樹形結(jié)構(gòu)視圖實例代碼
近兩年當中使用Angular開發(fā)過很多項目,其中也涉及到一些樹形結(jié)構(gòu)視圖的顯示,最近的在項目中封裝了大量的組件,一些組件也有樹形結(jié)構(gòu)的展示,所以寫出來總結(jié)一下。2017-05-05