2014-12-29 2 views
0

안녕하세요 내 앱에 중첩 된보기 양식을 만들었습니다. Angularjs 양식 문제. 양식이 보이지 않습니다.

그것은 그러나 나는 그것이 파셜에 저장 기능 (6 폼 페이지의 확장 형태에 더 많은 페이지를 추가하기로 결정 ... 큰 일/formname.html 등

양식이 표시되지 않습니다. 그것은 단지입니다 빈 공간. 그냥 헤더/탐색 모음이 작동합니다.

나는 script.js에 문제가 있다고 생각합니다. 콘솔에서 오류가 발생하지 않는 것 같습니다. 하루 종일 이유를 알아 내려고 노력했습니다. 도망 가지 않고 정말로 도움이 될 수 있습니다. 감사합니다

여기 내 plunker입니다 : enter link description here

여기

<!DOCTYPE html> 
<html ng-app="financeApp"> 

<head> 
<link data-require="[email protected]" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /> 
    <script data-require="[email protected]*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script> 
<script data-require="[email protected]" data-semver="0.2.10" src="https://rawgit.com/angular-ui/ui-router/0.2.10/release/angular-ui-router.js"></script> 
<script data-require="[email protected]*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script data-require="[email protected]*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
<link rel="stylesheet" href="style.css" /> 
<script src="script.js"></script> 
</head> 

<body ng-controller = "demoCtrl"> 

    <ul class="nav nav-pills pull-right"> 
    <li ng-class="{active: isState('home') }"> 
    <a ui-sref="home">Home</a> 
    </li> 
    <li ng-class="{active: isState('form') }"> 
    <a ui-sref="form">Form</a> 
    </li> 
    <li ng-class="{active: isState('contact') }"> 
    <a ui-sref="contact">Contact</a> 
    </li> 
</ul> 
<h3 class="text-muted">Demo Page</h3> 
<br> 
<div ui-view=""></div> 


</body> 

</html> 

index.html을 그리고

var financeApp = angular.module('financeApp', [ 
    'ui.router' ]) 
    .config(['$urlRouterProvider', '$stateProvider', 
    function($urlRouterProvider, $stateProvider) { 
     $urlRouterProvider.otherwise('/home'); 
     $stateProvider 
     .state('home', { 
      url: '/', 
      templateUrl: 'partials/home.html', 
      controller: 'homeCtrl' 
     }) 
     .state('form', { 
      url: '/form', 
      templateUrl: 'partials/form.html', 
      controller: 'formCtrl' 
     }) 






//note the following are form's child states 
      .state('form.goal', { 
      url: '/goal', 
      templateUrl: 'partials/formGoal.html', 
      controller: 'formGoalCtrl' 
      }) 
      .state('form.goalamount', { 
      url: '/goalamount', 
      templateUrl: 'partials/formGoalamount.html', 
      controller: 'formGoalamountCtrl' 
      }) 
      .state('form.risk', { 
      url: '/risk', 
      templateUrl: 'partials/formRisk.html', 
      controller: 'formRiskCtrl' 
      }) 

      .state('form.invest', { 
      url: '/invest', 
      templateUrl: 'partials/formInvest.html', 
      controller: 'formInvestCtrl' 
      }) 
      .state('form.fund', { 
      url: '/fund', 
      templateUrl: 'partials/formFund.html', 
      controller: 'formFundCtrl' 
      }) 
      .state('form.account', { 
      url: '/account', 
      templateUrl: 'partials/formAccount.html', 
      controller: 'formAccountCtrl' 
      }) 

     //contact state 
     .state('contact', { 
      url: '/contact', 
      templateUrl: 'partials/contact.html', 
      controller: 'contactCtrl' 
     }); 
    } 
    ]) 


financeApp.controller('demoCtrl', ['$scope', '$state', '$location', 
    function($scope, $state, $location) { 
    $scope.isState = function(states) { 
     return $state.includes(states); 
    }; 
    } 
]) 
.controller('homeCtrl', ['$scope', 
'$state', 
    function($scope, $state) {} ]) .controller('formCtrl', ['$scope', 
'$state', 
    function($scope, $state) { 




//This is to go to one of the child state of formCtrl. Here I choose 
//it to go to profile state first. 
    //optionally you can use parent property or "abstract = true". 
    //or you can use $urlRedirect service. 
    $state.go('.profile'); 
    } 
]) .controller('formGoalCtrl', ['$scope', '$state', 
    function($scope, $state) { 
    //just a simple function to go to the next state using $state.go() 
    $scope.goToNextState = function(nextState){ 
     $state.go(nextState); 
    } 
    } 
]) .controller('formGoalamountCtrl', ['$scope', '$state', 
    function($scope, $state) { 
    $scope.goToNextState = function(nextState){ 
     $state.go(nextState); 
    } 
    } 



]) .controller('formRiskCtrl', ['$scope', '$state', 
    function($scope, $state) { 
    $scope.goToNextState = function(nextState){ 
     $state.go(nextState); 
    } 
    } 



]) .controller('formInvestCtrl', ['$scope', '$state', 
    function($scope, $state) { 
    $scope.goToNextState = function(nextState){ 
     $state.go(nextState); 
    } 
    } 



]) .controller('formFundCtrl', ['$scope', '$state', 
    function($scope, $state) { 
    $scope.goToNextState = function(nextState){ 
     $state.go(nextState); 
    } 
    } 
    ]) .controller('formAccountCtrl', ['$scope', '$state', 
    function($scope, $state) { 
    $scope.finished = function(){ 
     alert('Form Completed!') 
    } 
    } 
    ]) .controller('contactCtrl', ['$scope', '$state', 
    function($scope, $state) { 
    $scope.contact_str = "This is a string from contactctrl"; 
    } 

    ]); 
+0

당신이 콘솔에서 오류를 얻을 plunker에있는 탭을 클릭하면, 정의되지 않은 많은 기능 메시지도되지 않고있다 logged ... – SoluableNonagon

+0

하지만 대부분의 오류는 angular.js CDN 코드에 있습니까?내 코드에 어떤 오류도 보이지 않습니까? – Superunknown

답변

1

당신의 상태가 해결되지 않는 이유입니다 템플릿 URL 경로가 파일 주어진 잘못된 때문에 참조하려고를 script.js. templateUrl의 각 값은 부분을 포함하는 파일의 실제 경로 여야합니다. 귀하의보기에 partials/이라는 디렉토리가 없습니다. 다른 파일과 동일한 디렉토리에 있습니다.

templateUrl에서 'partials/'을 제거하면 상태가 해결됩니다.


다른 어떤 조언과 생각을 당신의 코드를 찾고 후 : 당신은 상태가 존재하지 않는 .profile라는 아이를 리디렉션하는 최상위 폼 컨트롤러에서

  • 때문에,이 던지고 오류.

  • $state.go()에서 상대 상태를 사용하면 사용자가 앞으로 또는 뒤로 버튼을 사용하여 상태를 조작 할 때 문제가 발생할 수 있습니다. '.goal' 대신 'form.goal'과 같은 전체 주 이름을 사용하면이 문제를 방지 할 수 있습니다.

  • '/home'으로 연결을 시도하면 home 상태로 리디렉션이 설정됩니다. 그러나 home 상태로 기본값을 설정하려면 집 상태 인 url ('/')을 전달해야합니다. 아래의 실제 사례에 대한 귀하의 plunk 변경 내용을 참조하십시오.

  • 마지막으로, 단지 제안으로, ui.router 당신이 탐색 요소에 활성 클래스를 설정하는 uiSref와 함께 사용할 수 uiSrefActive라는 지침이 포함되어 있습니다. 그 여기에 대한 자세한 정보는 : https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref-active

업데이트 쿵하는 소리 : http://plnkr.co/edit/L9eCNpwpNHzZmKuY2V4J?p=preview

+0

완벽합니다. 당신은 설명하기 위해 당신의 시간을 들였고 실제로 내 plunker를 편집했습니다. 감사! – Superunknown

관련 문제