从其他脚本调用AngularJS

Question

应用。现在我想用AngularJS实现一个动态菜单。因此，我需要从现有应用程序更改AngularJS应用程序中的变量。

我正在尝试以下示例：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl" id="myApp">

  First Name:
  <input type="text" ng-model="firstName">
  <br>Last Name:
  <input type="text" ng-model="lastName">
  <br>
  <br>Full Name: {{firstName + " " + lastName}}
  <button ng-click="resetName()">hi</button>

</div>

<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
  $scope.resetName = function() {
    $scope.firstName = "John1";
    $scope.lastName = "Doe1";
  }
});

</script>

<button onclick="angular.element('#myApp').scope().resetName(); angular.element('#myApp').scope().apply();">extern</button>

从外部脚本调用“ resetName（）”函数的正确方法是什么？

Answer 1

只需将选择器附加到定义了控制器的DOM元素即可。喜欢

<div ng-app="myApp" ng-controller="myCtrl" id="myCtrl">

在任何地方都可以调用该控制器功能，例如

angular.element('#myCtrl').scope().resetName()

要么

angular.element(document.querySelector('#myCtrl')).scope().resetName()

在某些情况下，您需要修改控制器的对象值，您可以通过简单的方式进行操作。只需使用

angular.element(document.querySelector('#myCtrl')).scope().title = "test";

注意：请不要忘记apply更改，因为现在角度不会apply自动触发。您需要apply手动触发。在更新对象中的值后将其放在行下方

angular.element(document.querySelector('#myCtrl')).scope().apply();