如何从AngularJS控制器访问DOM



我正在尝试从AngularJS中的控制器函数提交表单。我需要在不使用jQuery的情况下执行此操作,因为目标网站当我使用jQuery时,给我一个跨域错误。我只需要发布表格。可以在不使用jQuery的情况下从控制器中进行操作?

我尝试使用$ Element Service,但这似乎是执行此操作的方式,并且并不能真正进入目标URL。谢谢您的任何建议。

<form name="myForm" id="myForm" method="post" action="@Model.Settings["URL"]" ng-controller="FormCtrl as fctrl">
</form>
setControllers.controller('FormCtrl', ['$scope', '$state', '$element', 'DataService',
      function ($scope, $state, $element, service) {
          var fctrl = this;
          function init() {
            $element.find('#myForm').submit();
          };
          init();
      }]);

好吧,你可以完全做

function init() {
    document.getElementById("myForm").submit();
};

,但我的解决方案和方法都不是很角度的。您可能应该去某种指令。

很好。提交表单的角度方法是使用ng-submit。这是一个以最简单的形式实现它的示例,即双关语:

html

<html ng-app="FormModule">
    <section ng-controller="formController as form">
        <form ng-submit="form.submit()">
            <label>Name</label>
            <input ng-model="form.data.name" placeholder="Insert your name" />
            <button type="submit">Submit My Name To The Server</button>
        </form>
    </section>
</html>

javascript

angular
    .module('FormModule', [])
    .controller('formController', formCtrl);
formCtrl.$inject = ['$scope']; // or whatever injection
function formCtrl($scope) {
    var form = this;
    form.data = {}; // ng-model form.data.name will be available in this
    form.submit = submitTheForm;
    function submitTheForm() {
        $.post('url', form.data); // or whatever HTTP service you're using
    }
}

无论如何,为了帮助您理解和编写更好的角度代码,这是我学会更好的写作方式,它反映在上面的代码

  1. John Papa Angular 1.x styleguide
  2. ngSubmit文档

最新更新