AngularJS - 用ng-click ui-routing無法正常工作

我正在使用ui-router創建一些路由，並且發生這種非常奇怪的事情。AngularJS - 用ng-click ui-routing無法正常工作

我有這條路線配置

.state('chapter_route', { 
    url: '/book/:chap', 
    templateUrl: "views/chapter.html", 
    params: { chap: null} 
})

所以，當我碰杯上：

<a ui-sref="chapter_route({ chap: getChapter.title})">CHAPTER:</a>

它重定向我，因爲我想，這下用戶界面視圖：

<div class="panel panel-default"> 
         <div class="panel-body"> 
          <p>{{getChapter.title}}</p> 
          {{getChapter.content}} 
         </div> 
    </div> 
...... 
...... 
     <div class="panel panel-default" data-ng-repeat="cha in allChapters"> 
      <div class="panel-body"> 
       <a ui-sref="chapter_route({ chap: cha.title})" ng-click="changeChapter(chap)">{{cha.title}}</a> {{cha.content | limitTo: 100}}. 
       <button ng-click="changeChapter(article)">PRESS ME </button> 
      </div> 
     </div>

正如你所看到的，我在這裏有另一個<a>標籤，這應該是我發送給另一章和一個LSO改變章的價值

getChapter看起來像：

$scope.allChapters = [ 
    { 
     title: "title 1", 
     chapter: "the whole chapter goes here" 
    }, 
    { 
     title: "title 2", 
     chapter: "the whole chapter 2 goes here" 
    }, 
    { 
     title: "title 3", 
     chapter: "the whole chapter 3 goes here" 
    } 
    ]; 

$scope.getChapter = $scope.allChapters[0];

和changeChapter看起來是這樣的：

$scope.changeChapter = function(chap){ 
    $scope.getChapter = chap; 
    console.log($scope.getChapter); 
};

因此，這裏是真正的情況：通過展示第一章我開始和爲所有下一章創建鏈接。如果我點擊<a>標籤，它將使用ng-click更改getChapter的值，並將其完全打印在控制檯上，但它不會更改本章的ui-view，除非我再次單擊它。我可以在幾分之一秒內看到ui-view的變化，但它不會保留，它會快速加載第一章的ui-view。但是如果我再次點擊，它會顯示我點擊的章節。所以，我需要點擊兩次才能更改這很奇怪。

但是，如果我決定點擊「PRESS ME」按鈕，它會直接更改爲ui-view中的下一章節。根據章節標題，我希望能夠點擊<a>標籤並更改爲不同的UI視圖，同時具有不同的URL。

任何想法可能會導致這個奇怪的錯誤？

謝謝:)

編輯：

https://plnkr.co/edit/D6f9Q3fhL294DukEZFOz?p=preview

我添加了一個簡單plunker這個問題我們討論這樣你就可以有什麼我談論的更好的視野。

來源

2017-09-06 N.Car

你可以讓http://jsfiddle.net/？ –

https：// plnkr。co/edit/D6f9Q3fhL294DukEZFOz？p = preview 我創建了一個plunker。當你點擊「標題2」或「標題3」時，不僅應該更改getChapter的url和value，還應該更改'

' –

檢查此鏈接：https：//plnkr.co/edit/Ir1shTsbQ8eNQah4P3YR ？p =預覽 –

的問題是與控制器代碼$scope.getChapter = $scope.allChapters[0];這裏所有的情況下，你是硬編碼當前章節與第一章，所以在所有的情況下，它只會呈現相同的。將其替換爲if (!$stateParams.chap) { $scope.selectedChapter = $scope.allChapters[0]; }。它會解決你的問題。 Updated Plunker with Fix

來源

2017-09-12 07:53:29 vpsingh016

我只是想用我的代碼，但我得到了讓我思考的東西。當你點擊右側的章節時，控制器會再次運行，這個狀態$ stateParams將被定義，因此它不會知道變量$ scope.selectedChapter。我點擊一個不同的章節後，在代碼中做了一個console.log（$ scope.selectedChapter），它說undefined –

檢查這個plunker https://plnkr.co/edit/D6f9Q3fhL294DukEZFOz?p=preview 因爲之前我使用不同的控制器，並不總是像前面的簡單例子一樣的控制器，它完全改變 –

我得到了！我用你的if語句，然後決定運行一個循環，然後找到這個章節是通過$ stateParams.chap 謝謝你:) –

Check this plunker for your working example

你必須使用$state.go這一點。

$scope.changeChapter = function(chap){ 
    $scope.getChapter = chap; 
    $state.go('chapter_route', {chap: chap}); 
    console.log($scope.getChapter); 
};

注意：不要忘了在控制器添加$state。

來源

2017-09-06 07:25:44

$ stage或$ state而相應改變？ – Phix

'$ state'，我正在使用它來移動到其他頁面。 –

編輯糾正錯字 – Phix

AngularJS - 用ng-click ui-routing無法正常工作

回答

相關問題