AngularJS動態更改字段值

Question

出於示例的目的，這里是一段非常基本的代碼。 CodePen示例http://codepen.io/anon/pen/yOYgEa

{{name}}

與...有關

<input ng-model="name" type="text" placeholder="" id="name" />

因此，當在輸入字段中鍵入某些文本時，它會反映在頁面上。 但是，如果動態設置#name的值，在這種情況下按下按鈕，則{{name}}不會更新。

我知道有一種“角度”方式，但這只是一個例子，因為實際上動態變化將來自jQuery回調。

我試圖添加$scope.watch但這似乎也不起作用。

Answer 1

嘗試這個 ：

var app = angular.module('demo',[]);

app.controller('MyController', function MyController($scope) {

  $("#mybutton").on("click", function(){
    //$("#name").val("Demo");
    $scope.name = "Demo"
    $scope.$apply() // we use $scope.$apply() which will call $scope.$digest()
  });

 $scope.name = "Enter a value";

 $scope.$watch('name',function(newValue, oldValue){
        $scope.name(newValue);
    }); 

});

$(document).ready(function(){



});

從$（document）.ready bcoz $ scope中刪除代碼無法在那里訪問 。

編輯： 您也可以使用ng-click

在HTML中

<input type="button" id="mybutton" value="Demo" ng-click="someFunction()">

在控制器中：

    $scope.someFunction = function(){
          $scope.name = "Demo" 
   }

Answer 2

如果你想從Angular中分離jQuery回調，你可以簡單地觸發change事件，這將導致Angular處理新值，就像用戶在框中鍵入它一樣：

var app = angular.module('demo',[]);

app.controller('MyController', function MyController($scope) {
 $scope.name = "Enter a value";
});

$(document).ready(function() {
  $("#mybutton").on("click", function() {
    $("#name").val("Demo").trigger('change');
  });
});

http://codepen.io/anon/pen/yOYMBb

Answer 3

使用觸發器 - CodePen

JS

$(document).ready(function(){

  $("#mybutton").on("click", function(){
    $("#name").val("Demo");
    $("#name").trigger('input');
  });

});

Answer 4

在Angular范圍內工作時，不需要jQuery事件綁定。

當您更新angularjs中的模型值時，它會啟動摘要周期以更新$ scope變量。

因此，當您在角度范圍外工作並嘗試調用任何事件時，digest cylce不會踢，結果是模型值不是udpated。

下面是udpated角度代碼：在范圍中添加了更新方法並刪除了$ scope.watch。

app.controller('MyController', function MyController($scope) {
 $scope.name = "Enter a value";

  $scope.update  = function(value){
    $scope.name  = value;
  }

});

更新的HTML：添加了ng-click事件。

 <input type="button" id="mybutton" ng-click="update('Demo');"  value="Demo">

這篇文章很好，如果你想深入挖掘更多。

http://www.sitepoint.com/understanding-angulars-apply-digest/