둥지 NG - 뷰

Question

컨트롤러

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의속성?

덕분에,

제이슨 라우팅

Answer 1

ng-view는 컨트롤러와 새로운 범위를 만들고, 당신은 자식 범위에 도달 할 수 있습니다. 제출 작업은 상위 범위에 있으며 양식 데이터는 하위 범위 (ng-view으로 작성)에 있습니다.

공용 폼 컨트롤을 사용하려는 경우 ng-include을 사용할 수 있습니다.이 지시문은 템플릿을 가져와 현재 범위에 렌더링합니다.

양식 컨트롤을 새 서식 파일로 이동 한 다음 모든 양식에 포함하십시오.

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