angularjs – 在表单内嵌套ng-view

前端之家收集整理的这篇文章主要介绍了angularjs – 在表单内嵌套ng-view前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_301_6@ 给控制器 @H_502_7@

@H_502_7@

function ctl($scope,$http) {
  $scope.postForm = function() {
    console.log("submitting form")
  }
}
@H_502_7@和观点

@H_502_7@

<form name="pform" ng-show="!error.Show">
    <div ng-view></div>
    <button type='button' value='Save' ng-click="postForm()" />
  </form>
@H_502_7@控制器方法postForm不会被调用,但是,如果我将表单标记移动到视图中,则调用方法.有没有理由认为这不符合我的预期?是否有另一种方法可以实现跨不同视图共享表单控件的目标?

@H_502_7@更新

@H_502_7@我的模块和routeProvider配置如下:

@H_502_7@

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;
})
@H_502_7@并且页面包含一些基于位置服务设置的导航元素,如下所示:

@H_502_7@

<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>
@H_502_7@ng-class语句工作得很好,是因为我在模块的run方法中设置了$scope的location属性

@H_502_7@谢谢,

@H_502_7@贾森

解决方法

带路由的ng-view使用控制器创建新范围,并且无法访问子范围.您的提交操作位于父范围,表单数据位于子范围(由ng-view创建). @H_502_7@

@H_502_7@如果要使用通用表单控件,可以使用ng-include,此指令获取模板并在当前范围内呈现它.

@H_502_7@将表单控件移动到新模板,然后将其包含在所有表单中.

@H_502_7@API参考:
http://docs.angularjs.org/api/ng.directive:ngInclude

猜你在找的Angularjs相关文章