如何使用“controller as”语法引用命名表单

Question

I'm having trouble referring to named forms in my controller when using the "controller as" syntax in angularjs. For example, given the following HTML:

<div ng-controller="MyController as ctl">
  <form role="form" name="newItemForm">
    <input type="text" id="firstName" ng-model="ctl.firstName"/>
  </form>
</div>

In the context of the controller,

function MyController() {
  var self = this;
  console.log(self.newItemForm);
}

self.newItemForm is undefined. If I had been using the $scope convention, I could have referred to $scope.newItemForm. Is there any other way of doing this in the controller as syntax without using the scope?

Answer 1

Change your HTML to this:

<div ng-controller="MyController as ctl">
  <form role="form" name="ctl.newItemForm">
    <input type="text" id="firstName" ng-model="ctl.firstName"/>
  </form>
</div>

Then you will be able to access the named form as expected in your controller without injecting $scope . Found this information here: http://www.technofattie.com/2014/07/01/using-angular-forms-with-controller-as-syntax.html