Nest-n-view inside the form

Question

considering the controller

function ctl($scope, $http) { $scope.postForm = function() { console.log("submitting form") } } 

and presentation

  <form name="pform" ng-show="!error.Show"> <div ng-view></div> <button type='button' value='Save' ng-click="postForm()" /> </form> 

The postForm controller postForm not called, however, if I move the form tag to the view that is called by the method. Is there a reason this is not working as I expect? Is there any other way to achieve the goal of sharing form controls in different views?

Update

my module and routeProvider are configured as follows:

 angular.module("profilemodule", []) .config(['$routeProvider', function ($routeProvider) { $routeProvider .when("/info", { templateUrl: '/partials/profile/info.html', controller: ProfileController }) .when("/user", { templateUrl: '/partials/profile/user.html', controller: ProfileController }) .when("/introduction", { templateUrl: '/partials/profile/editor.html', controller: ProfileController }) .otherwise({ redirectTo: '/info' }); }]).run(function ($rootScope, $location) { $rootScope.location = $location; }) 

and the page has some navigation elements that are set based on the location service as follows:

 <div class="row"> <div class="offset2 span10"> <ul class="nav nav-pills"> <li ng-class="{active: location.$$path.substring(0, '/info'.length) == '/info'}"><a href="#/info" >Information</a></li> <li ng-class="{active: location.$$path.substring(0, '/user'.length) == '/user'}"><a href="#/user" >User</a></li> <li ng-class="{active: location.$$path.substring(0, '/intro'.length) == '/intro'}"><a href="#/intro" >Introduction</a></li> </ul> </div> </div> <form name="pform" method="POST" ng-show="!error.Show"> <div ng-view></div> <button type='button' value='Save' ng-click="postForm()" /> </form> 

The ng-class statements work just fine because I set the location $scope property in the run module method?

thanks,

jason

Answer 1

ng-view creates a new area with a controller, and you cannot reach the child area. Your submit action is in the parent field, and the form data is in the area of ​​the child objects (created by ng-view ).

If you want to use common form controls, you can use ng-include , this directive gets the template and displays it in the current area .

Move the form controls to a new template, then include them in all your forms.

API Link:
http://docs.angularjs.org/api/ng.directive:ngInclude