ввод текста с ng-моделью и заданное значение через javascript

Question

У меня есть таблица, отображающая список данных, которые можно удалить. И в этой таблице у меня есть флажки для выбора пользователем, какие данные будут удалены. И когда нажата кнопка удаления, появится модальная мода, а в этом модале будет введен текст с ng-моделью. И его значение будет установлено через javascript/jquery. Я хочу, чтобы он был удален через angularjs $ http request. Я заметил, что он работает только при вводе текста в текстовое поле. Но когда он установлен через javascript, он не работает. Это поле ввода внутри модального.

<input class="form-control" id="id" ng-value="" ng-model="Thing.id" /> 

И модальный:

<script type="text/javascript"> 
$('#delete_item').on('show.bs.modal', function (event) { 
    var button = $(event.relatedTarget) 
    var modal = $(this) 
    var ids=getID_delete.call(); 
    $('.modal-body #id').val(ids) ; 
    modal.find('.modal-body #message').text('Are you sure you want to delete it?'); 
    });</script> 

А вот угловой JS контроллер:

mainApp.controller('equipmentController', ['$scope', '$http', function($scope, $http) { 
$scope.equipments=[] 
$http.get(BASE_URL+'Equipment/getAllEQs').success(function(response) { 
         $scope.equipments = response 

        }); 
$scope.delete = function(Thing) { 
$params = $.param({ 
    "id": Thing.id 

}) 
return $http({ 
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}, 
    url:BASE_URL+'Equipment/DeleteEQ', 
    method: "POST", 
    data: $params, 
    }) 
    .success(function(response) { 
    $('#delete_item').modal('hide'); 
    $scope.equipments = response 
    }); 
} 
}]); 

Answer 1

Прежде всего, вы не должны использовать JQuery в AngularJs это не очень хорошая практика , когда вам необходимо взаимодействовать с DOM, вы должны использовать директиву "Thinking in AngularJS" if I have a jQuery background?

Однако вы можете использовать это в качестве работы Arround:

<input type="text" class="form-control" id="id" ng-value="" 
ng-model="Thing.id" ng-model-options="{ updateOn: 'change' }" /> 

В коде JQuery вы должны использовать:

$('.modal-body #id').val(ids).trigger("change"); 

Это заставит модель будет обновляться на изменение входного сигнала

Здесь является jsFiddle exmple

Answer 2

Вы можете получить доступ к области вашего углового контроллера из вашего кода jquery. Таким образом, вы можете просто установить значение непосредственно в область.

var controllerElement = document.querySelector('[ng-controller="your_controller"]'); 
var controllerScope = angular.element(controllerElement).scope(); 
controllerScope.Thing.id = ids; 

Вы можете заставить ваш угловую компилятор для компиляции HTML с JQuery, чтобы обновить представление.

controllerScope.$apply(function(){ 
    controllerScope.Thing.id = ids; 
}); 

Так что ваш код должен быть похожим на это,

<script type="text/javascript"> 
    $('#delete_item').on('show.bs.modal', function (event) { 
     var button = $(event.relatedTarget) 
     var modal = $(this) 
     var ids=getID_delete.call(); 
     var controllerElement = document.querySelector('[ng-controller="your_controller"]'); 
     var controllerScope = angular.element(controllerElement).scope(); 
     controllerScope.$apply(function(){ 
      controllerScope.Thing.id = ids; 
     }); 
     modal.find('.modal-body #message').text('Are you sure you want to delete it?'); 
    }); 
</script>