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(){



});

从 $（文档）.ready 删除代码 $ 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角度代码：在范围中添加了更新方法并删除了$ scope.watch。

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

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

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

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

AngularJS动态更改字段值

4 个答案: