1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 在Angular外部使用js调用Angular控制器中提供的函数方法或变量

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

时间:2022-10-17 15:26:52

相关推荐

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

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

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。