Question

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

<!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-model的元素，并更改它们的值：

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

这只会更改输入字段中的文本，但不会影响实际的in-variable。通过

提交表格时

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

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

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

我该如何正确地做到这一点？

Answer 1

从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>

Answer 2

你是从有棱有角的环境出去的......应该避免，但有时候我们需要。

当您从角度环境中退出时，您需要手动触发$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>

通过JavaScript提交更新的ng-model

2 个答案: