Angular外部使用js調(diào)用Angular控制器中的函數(shù)方法或變量用法示例
更新時間:2016年08月05日 14:47:50 作者:Quber
這篇文章主要介紹了Angular外部使用js調(diào)用Angular控制器中的函數(shù)方法或變量用法,結合實例形式分析了Angular基于外部JS調(diào)用控制器中方法與變量的具體實現(xiàn)步驟與相關技巧,需要的朋友可以參考下
本文實例講述了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應用 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程序設計有所幫助。
您可能感興趣的文章:
- 在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)用
相關文章
Angular 實現(xiàn)輸入框中顯示文章標簽的實例代碼
這篇文章主要介紹了Angular 實現(xiàn)輸入框中顯示文章標簽的實例代碼,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11angular 用攔截器統(tǒng)一處理http請求和響應的方法
下面小編就為大家?guī)硪黄猘ngular 用攔截器統(tǒng)一處理http請求和響應的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-06-06實例詳解AngularJS實現(xiàn)無限級聯(lián)動菜單
這篇文章主要介紹了實例詳解AngularJS實現(xiàn)無限級聯(lián)動菜單的相關資料,需要的朋友可以參考下2016-01-01AngularJS實現(xiàn)單獨作用域內(nèi)的數(shù)據(jù)操作
這篇文章給大家介紹了利用AngularJs如何實現(xiàn)ng-repeat內(nèi)各個小的子作用域單獨數(shù)據(jù)綁定。有需要的小伙伴們可以參考借鑒,下面來一起看看吧。2016-09-09