Home > Developer > Web Develop
The HTML code looks like this:
1 <!DOCTYPE HTML>2 <HTMLNg-app= "MYAPP"ID= "MYAPP">3 <Head>4 <Metaname= "Viewport"content= "Width=device-width" />5 <title>Test</title>6 <Scriptsrc= "~/content/js/plugins/angularjs/angular.min.js"></Script>7 </Head>8 <BodyNg-controller= "Mycontroller">9 {{msg}}Ten <ahref= "javascript:;"ID= "Lbtntest">Call</a> One </Body> A </HTML>
The JavaScript code looks like this:
1 varNgapp = Angular.module (' myApp '), []);2Ngapp.controller (' Mycontroller ',function($scope, $http) {3$scope. msg = ' Hello, angular! ‘;4$scope. GetData =function () {5 return' Qubernet ';6 }7 });8 9onload =function () {Tendocument.getElementById (' Lbtntest '). onclick =function () { One //get angular applications with a controller A varAppelement = Document.queryselector (' [Ng-controller=mycontroller] '); - //Get $scope variable - var$scope =angular.element (appelement). scope (); the - //Call the MSG variable and change the value of the MSG -$scope. msg = ' 123456 '; - //The previous line changes the value of MSG, and if you want to synchronize to the angular controller, you need to call the $apply () method to + $scope. $apply (); - //Call the GetData () method in the controller + Console.log ($scope. GetData ()); A } at}
Before clicking on the "Invoke" button, the effect looks like this:
After clicking on the "Invoke" button, the effect looks like this:
Use JS to call a function method or variable provided in the angular controller outside of angular
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
