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

最新推荐文章于 2022-12-14 09:47:59 发布

xianweizuo

最新推荐文章于 2022-12-14 09:47:59 发布

阅读量491

点赞数

分类专栏：学习路径

原文链接：https://blog.csdn.net/qq_26222859/article/details/76550101

版权

学习路径专栏收录该内容

27 篇文章 1 订阅

订阅专栏

解决了项目中的一个问题，转载下来，备忘

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代码如下所示：

 1     var ngApp = angular.module('myApp', []);
 2     ngApp.controller('myController', function ($scope, $http) {
 3         $scope.msg = '你好，Angular！';
 4         $scope.getData = function () {
 5             return 'qubernet';
 6         }
 7     });
 8 
 9     onload = function () {
10         document.getElementById('lbtnTest').onclick = function () {
11             //通过controller来获取Angular应用
12             var appElement = document.querySelector('[ng-controller=myController]');
13             //获取$scope变量
14             var $scope = angular.element(appElement).scope();
15             
16             //调用msg变量，并改变msg的值
17             $scope.msg = '123456';
18             //上一行改变了msg的值，如果想同步到Angular控制器中，则需要调用$apply()方法即可
19             $scope.$apply();
20             //调用控制器中的getData()方法
21             console.log($scope.getData());
22          }
23     }

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

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

xianweizuo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在Angular外部使用js调用Angular控制器中提供的函数方法或变量

解决了项目中的一个问题，转载下来，备忘Html代码如下所示： <!DOCTYPE html> <html ng-app="myApp" id="myApp"> <head> <meta name="viewport" content="width=device-width" /> <title>Test&...
复制链接

扫一扫