Pet*_*807 3 javascript google-chrome-extension angularjs
我想通过 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";
这只会更改我输入字段中的文本，但不会影响实际的变量。通过提交表单时
document.getElementsByTagName("input")[1].click()
提交的输入不是它之前更改的输入，而是旧的输入 - 不再可见。
我认为这是因为通过 Javascript 更改值不会根据输入字段值更改 ng-model。
我怎样才能正确地做到这一点？
从 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指令使用的函数。
这是一个快速演示：
var input = angular.element(document.getElementsByTagName("input")[0]);
var model = input.controller('ngModel');
model.$setViewValue('New value');
model.$render();
input.parent('form').triggerHandler('submit');
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');
}