如何从AngularJS控制器访问DOM?

时间:2017-12-01 16:37:55

标签: angularjs angular-ui-router

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

我尝试使用$ element服务,但它似乎是jquery的方式,它并没有真正去目标网址。 感谢您的任何建议。

<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();
      }]);

2 个答案:

答案 0 :(得分:0)

嗯,你可以完全做到

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

但我的解决方案和你的方法都不是非常有棱角的。你可能应该采取某种指示。

答案 1 :(得分:0)

好。提交表单的角度方式是使用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
    }
}

无论如何,为了帮助你理解和编写更好的Angular代码,这里是我学习写作的更好方法,它反映在上面的代码中

  1. John Papa Angular 1.x Styleguide
  2. ngSubmit Documentation