Question

我有一个应用程序，称之为“表单填充程序”，它可以与许多使用Jquery的站点一起自动更新字段。

伪代码：

将Jquery注入网页
发现所需的表格。
更新值，例如

$(document).ready(function) {
   $('#id').val("some value");
}

我有一个新客户正在使用Angularjs，这个模型因为$ scope显然正在“带外”更新而崩溃。我无法访问第三方来源进行更改，所以我想知道是否可能获得jQuery更新来触发Angularjs更新？

Answer 1

您可以使用angular.element()来获取范围和ngModelController：

var value = 'theNewValue';
var el = angular.element($('#name'));

el.scope().$apply(function(){
  el.val(value);
  el.controller('ngModel').$setViewValue(el.val());
});

以下是一个简单示例：http://plnkr.co/edit/OJQQmanwQoFQSgECuqal?p=preview

Answer 2

同意其他回复，我建议使用$timeout代替$apply来避免摘要阶段出现问题。

与@ liviu-t响应类似，通过$ element的注入器获取$ timeout服务。然后使用它，因为它是nextTick（）函数。它实际上（第二个参数为0或缺少）几乎等同于nextTick()，区别在于它总是在摘要阶段运行其参数，不像$ apply，它必须被称为 outside 摘要。

Answer 3

根据实际情况，这有点复杂。我的解决方案假设元素在dom准备就绪时可用，而不是使用部分角度加载。 DEMO

<强> JS

function setAngularValue($elem, value) {
  var scope = $elem.scope();
  var ngModelName = $elem.attr('ng-model');
  if(ngModelName) {
    var $injector = $elem.injector();
    //get the parse service to use on the ng-model
    var $parse = $injector.get('$parse');
    var ngModel = $parse(ngModelName);
    scope.$apply(function() {
      //this will allow any ng-model value ex: my.object.value
      ngModel.assign(scope, value);
    });
  }
  else {
    //fallback if there is no model, weird case imho
    $elem.val(value);
  }
}

$(document).ready(function() {
  var $elem = angular.element('#myJqueryId');
  var value = 'some value';
  setAngularValue($elem, value);
});

<强> HTML

<p>Hello {{my.angular.model}}!</p>
<input id="myJqueryId" ng-model="my.angular.model"></input>

<强>链接

使用Angularjs强制“软”更新字段

3 个答案: