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

Question

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

伪代码：

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

$(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 不同，$apply 必须在摘要之外调用。

Answer 3

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

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>

链接

1. $注射器
2. $解析