更改$ scope通過單獨的JavaScript事件監聽器的角度變量

Question

我有一個角HTML文件，一個angularjs控制器文件和一個簡單的JavaScript文件。

角HTML文件是一樣的東西

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

    {{name}} 

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

</section> 

Angularjs控制器文件就像

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> 

的功能有什麼辦法在角部位的$ scope變量從含有常規的事件監聽一個單獨的JavaScript文件更改？

如何對此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>

Answer 2

您可以使用內置的角度功能NG單擊以達到相同的，

你的HTML將是：

<div ng-app ng-controller="MyCtrl"> 
    <div> {{ name}}</div> 

    <input type="submit" ng-click="btn()" value="button"></input> 

</div> 

你的角的js代碼將被：

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

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

    $scope.btn = function() { 
    $scope.name = "Changed"; 
    }; 
}]); 

你可以找到工作jsfiddle here