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

本文转载自查看原文 2016-02-27 11:01 8900 Angularjs/ Net_JavaScript/ Net_Angularjs/ 控制器/ Angular

Html代码如下所示：

 1 <!DOCTYPE html>
 2 <html ng-app="myApp" id="myApp">
 3 <head>
 4     <meta name="viewport" content="width=device-width" />
 5     <title>Test</title>
 6     <script src="~/Content/Js/Plugins/AngularJS/angular.min.js"></script>
 7 </head>
 8 <body ng-controller="myController">
 9     {{msg}}
10     <a href="javascript:;" id="lbtnTest">调用</a>
11 </body>
12 </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     }

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

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

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 angular控制器之间的传值 angular中ng-repeat ng-if 中的变量的值控制器中为什么取不到 Angular中引入外部js的使用方式 ThinkPHP调用其他控制器的方法,助手函数action() angular控制器的执行顺序和服务的注入情况 $broadcast、$on、$emit,angular不同级控制器之间的传值 Angular企业级开发(7)-MVC之控制器 ThinkPHP跨控制器调用方法 ThinkPHP跨控制器调用方法 tp5 方法控制器的调用