我有一个 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 部分代码?
最佳答案
您可以直接通过元素访问 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>
关于javascript - 通过单独的 JavaScript 事件监听器更改 $scope Angular 变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32671920/