更新由 jQuery 更改的 Select 的 Angular ngModel

Question

我有一个 3rd 方 jQuery 应用程序，我对它的控制很少，我不能也不想使用其他任何东西，所以请不要告诉我我不应该这样做......所以这个应用程序使将<select> 更改为空值（我可以控制），我希望让我的 AngularJS ngModel 知道 jQuery 将该选择更改为另一个值。
除了使用eval() 之外，我似乎无法让它工作，而且我真的不想使用它，所以我尝试了各种不同的解决方案，但没有任何效果（除了我所说的eval()）。如果我的 ngModel 是一个简单的名称（名称），我的解决方案实际上会起作用，但它实际上是一个复杂的名称（object.name），所以这是我被卡住了。

var optionObj = $('#selectId').val('');
angular.element(optionObj).triggerHandler('change');    // this fail
angular.element(optionObj).triggerHandler('onchange');  // this doesn't do anything

var scope = angular.element(optionObj).scope();
scope.$evalAsync(function(optionObj) {
    var ngModelAttr = optionObj.attr("ng-model"); // get the ng-model attribute     
    scope[ngModelAttr] = ''; // this does not work with complex object
    scope.user.language = ''; // this work, but cannot use it since ngModel naming is dynamic and unknown from within the code      

    console.debug(scope.user.language); // not empty 1st attempt, but empty on 2nd solution but is non-dynamic

    // using eval() works but it's dangerous
    eval("scope."+ngModelAttr+"=''");
}(optionObj));    

所以从那里的代码，并且知道我们的 Angular 看起来像下面的<select ng-model="user.language">...</select>，我怎么能告诉 Angular jQuery 做出了改变？再一次不要忘记我可能知道它是user.language 的事实，但在 jQuery 应用程序中它不知道它，所以一切都必须动态工作。
如果我使用eval，那么它可以工作，但它不仅丑陋而且危险......

另外值得一提的是，我使用的是 AngularJS 1.3，这就是我使用 $evalAsync() 而不是 $apply() 的原因

Answer 1

您可以使用scope.$eval() 将字符串评估为代码，并将当前范围作为上下文。使用它是安全的，因为如果字符串碰巧没有引用现有属性，它将返回undefined，并且范围是评估的上下文，因此尝试访问不在范围内的属性（如window）也将返回undefined。你可以这样使用它：

var scope = angular.element(optionObj).scope();

scope.$evalAsync(function(optionObj) {

    var ngModelAttr = optionObj.attr("ng-model");

    scope.$eval(ngModelAttr + " = '' ");

}(optionObj));

Answer 2

所以，我不确定我是否能 100% 了解你在这里所做的一切，但也许这会有所帮助.. 我假设（并希望）您将此控件包装为指令，对吗？那么，这是否就像将传递给指令的 ngModel 传递给指令（使用 2 路绑定）然后使用 jQuery 元素设置变量的值一样简单。

请注意，这是非常粗略的伪代码，只是为了让您了解我的意思：

在视图中：

在指令中：

angular.module('myapp.directives').directive('MyDirective',myJqueyWrappedDirective);
function myJqueryWrappedDirecive(){
  return {
    restrict: 'E',
    templateUrl: 'path/to/myTemplate.html', //you have your select element in a template
    scope: {
      myOuterNgModel: '=ngModelAttr'
     },
    link: function(scope,element){
      // #selectId is in your template
      $('#selectId').on('change', function(){ 
         scope.myOuterNgModel = $(this).val();
      }

    }
    }

该指令有两种方式绑定到视图中的控制器，因此当您的 jquery 元素在此处设置值时，它会更改外部范围控制器中的值。