2016-12-09 11 views
1

まず、長い質問には申し訳ありませんが、そのようなものでなければなりません。残念ながら...角度ui.routerリロードテンプレート

私は2つのテンプレートと2つのルーティングロジックをすべて別々のファイルにリンクしています。何らかの理由で、ロードするテンプレート(選択した領域に依存)は、そのリージョンテンプレートをロードしません。 2回目にクリックするとロードされます。

Reloading current state - refresh data

何が私のために働いていない:私はこのトピックから、これまでのソリューションを試してみましたのでご注意ください。

私はこのように、htmlコードで"{reload:true}"インラインを配置することによって、そのうちの一つ(別の領域)を解決するために管理している:

<a data-ui-sref="uk-web" data-ui-sref-opts="{reload:true}">Energy Consultant</a> 

は今、私は別のテンプレートのために同じことをやったし、それが機能していません。

<div class="btn us-btn" data-ng-controller="carCtrlUs"> 
      <script type="text/ng-template" id="careersTplUs.html"> 
       <div class="closer"> 
        <span class="close-me" data-ng-click="ok()">X</span> 
       </div> 
       <uib-accordion close-others="true"> 
        <div uib-accordion-group class="modal-body modone panel-default pull-right" is-open="false"> 
         <uib-accordion-heading> 
          <p class="car-heading">Sales Department <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i> 
          </p> 
         </uib-accordion-heading> 
         <ul> 
          <li><a data-ui-sref="us-web" data-ui-sref-opts="{reload:true}">Energy Consultant</a></li> 
          <li><a data-ui-sref="us-crm" data-ui-sref-opts="{reload:true}">Client Relationship Manager</a></li> 
         </ul> 
        </div> 
        <div class="modal-body modtwo panel-default pull-right" uib-accordion-group is-open="false"> 
         <uib-accordion-heading> 
          <p class="car-heading">Marketing Department <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i> 
          </p> 
         </uib-accordion-heading> 
         <ul> 
          <li><a data-ui-sref="us-web" data-ui-sref-opts="{reload:true}">Web Developer</a></li> 
          <li><a data-ui-sref="us-crm" data-ui-sref-opts="{reload:true}">Marketing Coordinator</a></li> 
         </ul> 
       </div> 
     </uib-accordion> 
    <div class="show-me" ui-view></div> 
    </script> 
    <button class="btn" ng-click="open()" data-ui-sref="us-intro">United States</button> 
</div> 

app.js:

var app = angular.module('carApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap', 'ui.router']); 

コントローラ、このテンプレート用:

app.controller('carCtrlUs', function($scope, $http, $uibModal) { 
    $http.get('json/jobs-us.json').then(function(response) { 
     $scope.placeholder = response.data.default; 
     $scope.specs = response.data.specs; 

     $scope.open = function() { 

      var modalContent = $uibModal.open({ 
       templateUrl: 'careersTplUs.html', 
       controller : 'modalContentCtrlUs', 
       controllerAs: '$ctrl', 
       size: 'lg', 
       backdropClass: 'backdropOver', 
       openedClass: 'modal-opened', 
       resolve: { 
        items: function() { return $scope.specs; }, 
        items2: function() { return $scope.placeholder;} 
       } 
      }) 
     console.log($scope.placeholder); 
     console.log($scope.specs); 
     console.log($scope.specs.web-dev); 
     } 
    }); 
}); 

app.controller('modalContentCtrlUs', function($scope, $uibModalInstance, items, items2) { 
    $scope.specs = items; 
    $scope.placeholder = items2; 
    $scope.ok = function() { 
     $uibModalInstance.close(); 
    } 
}); 

factory.js:

app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { 
    $stateProvider 
     .state("us-intro", { 
      url:"/intro", 
      templateUrl: "templates/us/start.html" 
     }) 
    $stateProvider 
     .state("us-web", { 
      url: "/web-developer/", 
      templateUrl: "templates/us/web-developer.html", 
     }) 
     .state("us-crm", { 
      url: "/crm/", 
      templateUrl: "templates/us/crm.html" 
     }) 
     /*next .state*/ 
}]); 

テンプレート:

これは私のhtmlです
<div ng-repeat="(k, v) in specs.webdev"> 
    <h3>{{::v["job-title"]}}</h3> 
    <p>{{::v["job-body"]}}</p> 
    United States Apply Here: 
    <p>{{::v["job-apply"]}}</p> 
</div> 

私はui-bootstrap(モーダルとアコーディオンはすべてモーダルウィンドウなので)を使用しています。

瞬時にリフレッシュするにはどうすればよいですか?私はこれに数日間詰まっていて、それはイライラしています...私はここで何が間違っていますか?

EDIT:片方向データバインディングの場合、「::」がわかっています。私はそれなしで試した結果は同じです。おそらく問題のデータを.jsonファイルに置くことでこれを解決できますが、それは実際には醜いハックになります。

答えて

0

でなければなりません。地域コードで地域を明示するようにURLを変更しましたので、現在作業中です。例えば

英国:

$stateProvider 
     .state("de-web", { 
      url: "/web-developer-de", 
      templateUrl: "templates/de/web-developer.html", 
     }) 
     .state("de-crm", { 
      url: "/crm-de", 
      templateUrl: "templates/de/crm.html" 
     }) 

イタリア:

$stateProvider 
     .state("it-web", { 
      url: "/web-developer-it", 
      templateUrl: "templates/it/web-developer.html", 
     }) 
     .state("it-crm", { 
      url: "/crm-it", 
      templateUrl: "templates/it/crm.html" 
     }) 

米国:

$stateProvider 
     .state("us-web", { 
      url: "/web-developer-us", 
      templateUrl: "templates/de/web-developer.html", 
     }) 
     .state("us-crm", { 
      url: "/crm-us", 
      templateUrl: "templates/de/crm.html" 
     }) 

これは動作しますが、私は満足していません。テンプレートが同じURLにロードされていることをどのように達成できますか?

1
<div ng-repeat="(k, v) in specs.webdev"> 
    <h3>{{::v["job-title"]}}</h3> 
    <p>{{::v["job-body"]}}</p> 
    United States Apply Here: 
    <p>{{::v["job-apply"]}}</p> 
</div> 

"::"は、ダイジェストサイクルを短縮するためのデータバインドを回避します。それらを削除してみてください。

+0

申し訳ありませんが、私は書いたはずです。私は知っている::片方向バインディングのためであり、私はそれなしで試した。同じ結果。 –

0

<a data-ui-sref="uk-web" data-ui-sref-opts="{reload:true}">Energy Consultant</a>

//それは私がやってみたかったthis..Whatは、 "URL" と同じにすることです解決した

<a data-ui-sref="us-web" data-ui-sref-opts="{reload:true}">Energy Consultant</a> 
+0

これはすでに私たちのウェブです。 uk-webは別のロジックです。 –