angularjs – 在表单内嵌套ng-view
发布时间:2020-12-17 16:59:16 所属栏目:安全 来源:网络整理
导读:给控制器 function ctl($scope,$http) { $scope.postForm = function() { console.log("submitting form") }} 和观点 form name="pform" ng-show="!error.Show" div ng-view/div button type='button' value='Save' ng-click="postForm()" / /form 控制器方
给控制器
function ctl($scope,$http) { $scope.postForm = function() { console.log("submitting form") } } 和观点 <form name="pform" ng-show="!error.Show"> <div ng-view></div> <button type='button' value='Save' ng-click="postForm()" /> </form> 控制器方法postForm不会被调用,但是,如果我将表单标记移动到视图中,则调用该方法.有没有理由认为这不符合我的预期?是否有另一种方法可以实现跨不同视图共享表单控件的目标? 更新 我的模块和routeProvider配置如下: 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; }) 并且页面包含一些基于位置服务设置的导航元素,如下所示: <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> ng-class语句工作得很好,是因为我在模块的run方法中设置了$scope的location属性? 谢谢, 贾森 解决方法
带路由的ng-view使用控制器创建新范围,并且无法访问子范围.您的提交操作位于父范围,表单数据位于子范围(由ng-view创建).
如果要使用通用表单控件,可以使用ng-include,此指令获取模板并在当前范围内呈现它. 将表单控件移动到新模板,然后将其包含在所有表单中. API参考: (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |