2017-09-12 10 views
1

私のAngularJS Appには、ユーザーがアプリケーション番号を入力する必要があるフォームがあり、成功すると適切なデータを表示するコンテンツが表示されます。このデータは、現在のstateのパラメータとして渡した場合にのみ、scopeからアクセスできます。私はルーティングのためにui-routerを使用しています。状態にパラメータを渡すと要素が表示されない

私はReloading current state - refresh dataのようなスレッドを読んでいますが、現在の状態にデータを渡してページをリフレッシュすることはできますが、リフレッシュしてもコンテンツは表示されません。 ng-showng-ifを正しく使用しているかどうかもわかりません。次のようにデータを渡すためにMy機能は次のとおりです。

vm.findPatent = function(patentNo) { 
    searchPatentService.findPatent(patentNo) 
    .then(
     function(data) { 
      $state.go('.', { patent: data }, {reload: false, notify: false, location: false}) 
      }) 
     }, 
     function(errResponse) { 
      console.error('Error while finding patent'); 
     } 
    ); 
} 

そしてstate内の私のパラメータ:

.state('search-patent', { 
    url: '/search-patent', 
    component: 'searchpatent', 
    params: { 
     navigation: 'patentnav', 
     patent: null 
    } 
}) 

と提出フォームに以下の内容を表示するフォームでの私の見解:

<form ng-submit="$ctrl.findPatent(searchPatent)" name="searchPatentForm"> 
    <fieldset> 
     <div class="form-group row"> 
      <labelfor="searchPatent">EP No.</label> 
      <div> 
       <input type="text" name="searchPatent" ng-model="searchPatent" class="form-control" placeholder="Search" required> 
      </div> 
     <div> 
      <button type="submit">Submit</button> 
     </div> 
    </div> 
    </fieldset> 
</form> 

<div class="row" ng-show="searchPatentForm.$submitted"> 
    <div class="col-md-12"> 
//ANOTHER FORM AND CONTENT WHICH IS DISPLAYED ON SUBMIT 
    </div> 
</div> 

質問

ページを更新せずに現在のstateにデータを渡すにはどうすればよいですか?また、ng-showを使用するより良い解決策がありますか?ありがとう

+0

はまだ明らかではない参照してください?あなたはページonClickをリフレッシュしたいですか?そしていくつかのデータを表示しますか? –

+0

なぜあなたは$ scopeを使用したくないのですか? –

+0

お詫び申し上げます。送信時には、現在の状態にパラメータを渡し、現在の状態とページに残す必要があるため、送信時に(ng-showを介して)表示されるコンテナに必要なオブジェクトプロパティを表示できます。私が持っている問題は、パラメータが渡されますが、ページがリフレッシュされ、表示され、1秒間点滅してから消えることを意味するcontaineです。 –

答えて

2

あなたはあなたが提出した後もページに残りたいので。あなたのdivは、詳細な例についてはng-showsee details here

<div class="row" ng-if="result"> 
    <div class="col-md-12"> 
     {{result}} 
    </div> 
</div> 

を使用し、他の再作成したい場合は、ng-ifを使用する必要があり、あなたのビューで

$scope.result= null; 
vm.findPatent = function(patentNo) { 
    searchPatentService.findPatent(patentNo) 
    .then(
     function(data) { 
      $scope.result=data; 
      }) 
     }, 
     function(errResponse) { 
      console.error('Error while finding patent'); 
     } 
    ); 
} 

いただきました!あなたの目標here

+0

ああ、鮮やかで、より簡単です。最初のフォームを送信する前にコンテナが表示されていますか?ユーザーが送信をクリックする前にどのように非表示にするのですか? –

+0

ソート済みです。 '&& searchPatentForm。$ submitted'を追加しました。ありがとうございます@Abdullah –

+0

Npあなたは「$ scope.result.length」しか使用できません –

関連する問題