업데이트 Select의 Angular ngModel이 jQuery로 변경되었습니다

Question

최소한의 제어 권한을 가진 제 3 자 jQuery 응용 프로그램이 있습니다. 다른 것을 사용하고 싶지 않으므로 사용하지 않으려 고하지 마십시오. 이렇게 ...이 응용 프로그램은 <select> (내가 제어 할 수있는) 빈 값으로 변경하고 내 AngularJS ngModel이 jQuery가 그 선택을 다른 값으로 변경했다는 사실을 알고 싶습니다.
eval()을 사용하는 것 이외에는 작동하지 않는 것처럼 보일 수 있습니다. 그래서 나는 모든 종류의 다른 솔루션을 시도했지만 심각하게 사용하지 않으려 고하지만 아무 것도 작동하지 않습니다. (내가 말했듯이 eval()은 별개입니다.) 내 솔루션은 실제로 ngModel이 단순한 이름 (이름) 일 경우 실제로 작동하지만 사실 복잡한 이름 (object.name)이므로 이것이 막혔습니다. 내가 jQuery를이 변화를 한 것으로 각도 조언을 할 수있는 방법이있다, 다음과 같은 <select ng-model="user.language">...</select>처럼 우리의 모난 모습을 알고 코드에서 그래서

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));  

? 다시 여기에 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 요소가 값을 여기에 설정하면 바깥 범위 컨트롤러의 값이 변경됩니다.