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

最新推荐文章于 2021-11-07 10:00:00 发布

吴杼恩

最新推荐文章于 2021-11-07 10:00:00 发布

阅读量2.7k

点赞数 1

分类专栏： AngularJS知识点汇总

AngularJS知识点汇总专栏收录该内容

31 篇文章 0 订阅

订阅专栏

 
 <!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>