javascript - 通过单独的 JavaScript 事件监听器更改 $scope Angular 变量

Question

我有一个 Angular HTML 文件、一个 angularjs Controller 文件和一个简单的 JavaScript 文件。

Angular HTML 文件类似于

<section data-ng-controller="myCtrl">

    {{name}}

    <button id="btn1">Button1</button>

</section>

Angularjs Controller 文件就像

angular.module('users').controller('myCtrl', ['$scope',
function($scope) {

    $scope.name="HELLO";

}]);

和一个简单的 JavaScript 文件，例如

<script>
document.getElementById("btn1").addEventListener("click",function(){

    // code????? that can change the $scope.name variable to "changed"

});
</script>

html 文件最初看起来像这样

HELLO
<button>

我想要这样的功能:单击按钮后，它应该更改为类似的内容

changed
<button>

有没有办法从包含常规事件监听器的单独 JavaScript 文件中更改 Angular 部分中的 $scope 变量？

如何为此编写 JavaScript 部分代码？

Answer 1

您可以直接通过元素访问 Angular 范围。

//Angular code
var myApp = angular.module('users', []);

myApp.controller('myCtrl', ['$scope',
function($scope) {
    $scope.name="HELLO";
}]);

//External code
document.getElementById("btn1").addEventListener("click", function (e) {
  var $scope = angular.element(e.target).scope();
  
  $scope.$apply(function () {
    $scope.name = 'Changed';
  });
});

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

<section ng-app="users" ng-controller="myCtrl">
    {{name}}
    <button id="btn1">Button1</button>
</section>