Angular外部使用js调用Angular控制器中的函数方法或变量用法示例

程序员文章站 2022-06-10 18:45:45

本文实例讲述了angular外部使用js调用angular控制器中的函数方法或变量。分享给大家供大家参考，具体如下： ...

本文实例讲述了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>

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

Angular外部使用js调用Angular控制器中的函数方法或变量用法示例

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

Angular外部使用js调用Angular控制器中的函数方法或变量用法示例

希望本文所述对大家angularjs程序设计有所帮助。

上一篇：对于有大量重复数据的表添加唯一索引_MySQL

下一篇： PHP大神的十大优良习惯，php大神十大