在Angular外部使用js调用Angular控制器中提供的函数方法或变量

最新推荐文章于 2021-06-09 23:21:46 发布

qubernet

最新推荐文章于 2021-06-09 23:21:46 发布

阅读量697

点赞数

CC 4.0 BY-SA版权

分类专栏： AngularJS 前端 js 文章标签：控制器

本文链接：https://blog.csdn.net/qubernet/article/details/82599589

前端同时被 3 个专栏收录

103 篇文章

订阅专栏

83 篇文章

订阅专栏

AngularJS

9 篇文章

订阅专栏

本文展示了一个使用AngularJS和JavaScript实现的简单交互实例，包括HTML代码、JavaScript代码及按钮触发事件的效果变化。

Html代码如下所示：

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

JavaScript代码如下所示：

     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());
          }
     }

在点击“调用”按钮之前效果如下图所示：