更新jQuery更改的Select的Angular ngModel

Question

我有一個對第三方控制最少的jQuery應用程序，並且我不能也不想使用其他任何東西，所以請不要告訴我我不應該這樣做...因此，該應用程序進行<select>更改為空值（我可以控制），並且希望讓AngularJS ngModel知道jQuery將選擇的值更改為另一個值。
除了使用eval() ，我似乎無法使其正常工作，而我真的不想使用它，因此我嘗試了各種不同的解決方案，但沒有任何效果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();
      }

    }
    }

該指令具有2種方式綁定到視圖中的控制器，因此，當您的jquery元素在此處設置值時，它將更改外部作用域控制器中的值。