Angular外部使用js調用Angular控制器中的函數方法或變量用法示例

2019-11-20 09:17:53

字體：大中小

來源：轉載

供稿：網友

本文實例講述了Angular外部使用js調用Angular控制器中的函數方法或變量。分享給大家供大家參考，具體如下：

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

在點擊“調用”按鈕之前效果如下圖所示：