通过JavaScript提交更新的ng模型

Submit updated ng-model via JavaScript

本文关键字：ng 模型 更新 JavaScript 提交 通过      更新时间：2023-09-26

我想通过JavaScript提交存储在ng模型中的文本。我有以下代码：

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<body>
<div ng-app>
    <div ng-controller="Ctrl">
        <form ng-submit="submit()">Enter text here:
            <input type="text" ng-model="in" name="text" />
            <input type="submit" id="submit" value="Submit" /> <pre>Last input: {{active}}</pre>
        </form>
    </div>
</div>
<script>    
function Ctrl($scope, $http) {
    $scope.active = "none";
    $scope.in = "enter input here";
    $scope.submit = function () {
    $http.post("do_something.php",{sometext:$scope.in})
        .then(function(response) {
            $scope.active = response.data;
        });
    };
}
</script>
</body>
</html>

我想写一个扩展，将文本输入到输入字段并提交

我使用JavaScript访问具有ng模型的元素，并更改它们的值：

document.getElementsByTagName("input")[0].value="hello";

这只会更改输入字段中的文本，但不会影响实际的in变量。通过提交表格时

document.getElementsByTagName("input")[1].click()

提交的输入不是以前更改的输入，而是旧的输入-不再可见。

我认为这是因为通过Javascript更改值不会根据输入字段值更改ng模型。

我怎样才能正确地做到这一点？

从Angular应用程序本身之外修改Angular模型不是一个好主意。但考虑到你有一个很好的理由，你可以这样做：

var input = angular.element(document.getElementsByTagName("input")[0]);
var model = input.controller('ngModel');
model.$setViewValue('New value');
model.$render();
input.parent('form').triggerHandler('submit');

通过直接使用ngModelController，您可以不必知道实际的模型名称。您只需使用ngModelController API。另一个好处是，您不需要做像document.getElementsByTagName("input")[1].click()这样容易出错的事情。相反，只需直接触发ngSubmit指令使用的函数。

这里有一个快速演示：

function Ctrl($scope) {
  $scope.in = "enter input here";
  $scope.submit = function() {
    alert('Value submitted: ' + $scope.in);
  };
}
function updateModel() {
  
  var input = angular.element(document.getElementsByTagName("input")[0]);
  var model = input.controller('ngModel');
  model.$setViewValue('New value');
  model.$render();
  input.parent('form').triggerHandler('submit');
}
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<div ng-app ng-controller="Ctrl">
  <form ng-submit="submit()">
    Enter text here:
    <input type="text" ng-model="in" name="text" />
    <input type="submit" id="submit" value="Submit" />
  </form>
</div>
<hr>
<p>Set model from outside of the Angular app.</p>
<button onclick="updateModel()">Set model</button>

您正从棱角分明的环境中走出。。。这应该避免，但有时是需要的：在这种情况下，您需要手动触发$digest周期，这是一个例子：

function onNoNgClick() {
  var $scope = angular.element(document.getElementById('TestForm')).scope();
  
  $scope.$apply(function() {
    $scope.value = 'FOOBAZ';
    
    return $scope.submitRequest();
  });
}
function TestCtrl($scope) {
  $scope.value = 'Initial Value';
  
  $scope.submitRequest = function() {
    console.log('sendData', $scope.value);
  };
}
angular
  .module('test', [])
  .controller('TestCtrl', TestCtrl);
document.addEventListener('DOMContentLoaded', function() {
return document.getElementById('NoNG').addEventListener('click', onNoNgClick);
});
.no-ng {
  padding: 1em;
  border: 1px solid green;
  margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section ng-app='test'>
  <div ng-controller="TestCtrl">
  <form ng-submit="submitRequest()" name="testRequest" id="TestForm">
    <input type="text" ng-model="value" />
    
    <button type="submit">Submit</button>
  </form>
  </div>
</section>
<div class="no-ng"><button id="NoNG">SetText: FOOBAZ</button></div>

相关文章：