Question

我有一个更改基础$scope的按钮，它可以显示更改，但映射/绑定div中的文本不会更改

指定我想要的结果是当我单击带有文本button的按钮时，它应该更改<div id="text">的文本但是它不会这样我不知道我在做什么错误地

var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope){
	$scope.data =
  	{"person": 
    	{"id": 3,
      "text": "this is the text value"
      }
		};
    
});

setTimeout(function(){
var elem = document.getElementById('ex');
elem.addEventListener('click',
function(){
	$scope = angular.element(document.getElementById('text')).scope();
  $scope.data.person.text = "this is new text";
},false);

elem = document.getElementById('log');
elem.addEventListener('click', function(){
console.log(angular.element(document.getElementById('text')).scope().data.person.text);
},false)

//alert('load');
},500);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div id="id" ng-model="data.person.id">{{data.person.id}}</div>
  <div id="text" ng-model="data.person.text">{{data.person.text}}</div>
</div>

<button id="ex">
button
</button>

<button id="log">
log
</button>

Answer 1

有Angular指令要执行此操作，请使用ngClick：

var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope){
    $scope.data = {"person": {"id": 3, "text": "this is the text value"}};
    
    $scope.changeTextValue = function(){
      $scope.data.person.text = "this is new text";
    }
    
    $scope.log = function(){
      console.log($scope.data.person.text);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div>{{data.person.id}}</div>
  <div>{{data.person.text}}</div>
  <button ng-click="changeTextValue()">
    button
  </button>

  <button ng-click="log()">
    log
  </button>
</div>

此外，ngModel仅用于input，select或textarea。使用{{data.person.id}}足以获得data.person.id值（请查看此页面以获取有关interpolation and data binding的更多信息）

Answer 2

由于您使用setTimeout功能，因此需要手动启动$digest周期。文本更改后使用$scope.$apply()。它将启动循环并将值绑定到视图

＆＃13;

var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope){
	$scope.data =
  	{"person": 
    	{"id": 3,
      "text": "this is the text value"
      }
		};
    
});

setTimeout(function(){
var elem = document.getElementById('ex');
elem.addEventListener('click',
function(){
	$scope = angular.element(document.getElementById('text')).scope();
  $scope.data.person.text = "this is new text";
  $scope.$apply()
},false);

elem = document.getElementById('log');
elem.addEventListener('click', function(){
console.log(angular.element(document.getElementById('text')).scope().data.person.text);
},false)

//alert('load');
},500);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div id="id" ng-model="data.person.id">{{data.person.id}}</div>
  <div id="text" ng-model="data.person.text">{{data.person.text}}</div>
</div>

<button id="ex">
button
</button>

<button id="log">
log
</button>

＆＃13;

Answer 3

AngularJs的主要优势之一是双向绑定，并帮助用户避免通过代码访问和操作DOM（避免使用document.getElementById())。

您已在控制器外部编写了事件处理程序代码，该代码不在AngularJs范围内。您的所有视图行为都可以进入控制器，然后您可以直接使用$scope访问范围数据。将事件处理程序附加到按钮中的事件属性ng-click（对于单击事件）。使用{{data}}之类的单向绑定将所需数据绑定到div。此处不需要ng-model，因为您没有通过UI进行编辑。

Angular div在更新$ scope时不更改文本

3 个答案: