AngularJS - （使用Ionic框架） - 標題標題上的數據綁定不起作用

Question

我正在使用名爲「Ionic」（http://ionicframework.com/）的基於AngularJS的庫。

這看起來很簡單，但它不適合我。

在我的視圖中的一個，我有以下

<view title="content.title"> 
    <content has-header="true" padding="true"> 
    <p>{{ content.description }}</p> 
    <p><a class="button button-small icon ion-arrow-left-b" href="#/tab/pets"> Back to home</a></p> 
    </content> 
</view> 

在控制器針對上述觀點，我有

angular.module('App', []).controller('DetailCtrl', function($scope, $stateParams, MyService) { 

    MyService.get($stateParams.petId).then(function(content) { 
    $scope.content = content[0]; 
    console.log($scope.content.title); // this works! 
    }); 
}); 

數據該視圖是通過一個簡單的HTTP GET加載服務（稱爲MyService）。

的問題是，當我瀏覽這個頁面，

<view title="content.title"> 

不顯示標題。這只是一個空白。根據Ionic文檔（http://ionicframework.com/docs/angularjs/controllers/view-state/），我認爲我做的是正確的事情。

奇怪的是「{{content.description}}」部分有效，但「content.title」不起作用？

另外，是因爲我動態加載內容（通過HTTP GET）？

Answer 1

下面是如何在離子中完成此操作的一個工作示例。打開菜單，然後點擊「關於」。當「關於」頁面轉換時，您將看到已解決的標題。

正如Florian指出的，您需要使用服務並解決問題才能獲得理想的效果。然後將返回的結果注入控制器。這有一些不利的一面。在承諾解決之前，州提供商不會更改路線。這意味着用戶嘗試更改位置和實際發生時間時可能會有明顯的滯後。

http://plnkr.co/edit/p9b6SWZmBKWYm0FIKsXY?p=preview

Answer 2

如果你看看ionic view directive source on github，它不會看標題屬性，這意味着當你設置一個新的值時它不會更新你的視圖。

在從服務器收到答案並填寫$scope.content.title之前處理該指令。

你的確應該在你的服務中使用一個承諾，並在解析器中調用它。那或者提交a pull request to ionic。

Answer 3

我遇到了同樣的問題，並能夠通過雙花括號包裹我的標題來解決它。

<ion-view title="{{ page.title }}">

我要指出，我page.title是由我控制，而不是從一個承諾靜態設置。

Answer 4

我得到這個使用<ion-view title={{myTitle}}>解決方案（根據plong0's答案）舊版本的Ionic的工作。

我不得不在更新的版本中更改爲<ion-view view-title=。但是使用beta-14，它會再次顯示空白標題。

離我最近的解決方案是直接從控制器使用$ionicNavBarDelegate.title(myTitle)。當我運行它時，它簡要地顯示了標題，稍後片刻將其刪除。

非常令人沮喪。

Answer 5

我有一個非常類似的問題，其中標題不會更新，直到我切換頁面幾次。如果我將標題綁定到頁面內的另一個地方，它會馬上更新。我終於在離子文檔中發現這些頁面的一部分被緩存了。這是這裏所描述http://ionicframework.com/docs/api/directive/ionNavView/

爲了解決我的問題，我轉過身緩存功能，用於動態標題的觀點：

<ion-view cache-view="false" view-title="{{title}}"> 
... 
</ion-view> 

Answer 6

通過使用ion-nav-title指令（因爲離子測試14個可用），綁定似乎正常工作。

不是

<ion-view title="{{content.title}}"> 
    .... 

做這個

<ion-view> 
    <ion-nav-title>{{content.title}}</ion-nav-title> 
    ... 

作品一種享受。

Answer 7

一種用於離子的較新版本的解決方案是使用<ion-nav-title>元件而非view-title屬性。只需使用大括號語法在<ion-nav-title>的內容中綁定動態標題即可。例如：

<ion-view> 
    <ion-nav-title> 
     {{myViewTitle}} 
    </ion-nav-title> 
    <ion-content> 
    <!-- content --> 
    </ion-content> 
</ion-view> 

Answer 8

這是我第一次在Ionic 1.7中使用動態標題，並且遇到了這個問題。所以我用控制器的$ionicNavBarDelegate.title(')來解決，正如Kevin Gurden所說的那樣。但另外，我使用了cache-view="false"。

查看：

<ion-view cache-view="false"></ion-view> 

控制器：

angular 
    .module('app', []) 
    .controller('DemoCtrl', DemoCtrl); 

    DemoCtrl.$inject = ['$ionicNavBarDelegate']; 

    function DemoCtrl($ionicNavBarDelegate) { 
    $ionicNavBarDelegate.title('Demo View'); 
    } 

Answer 9

使用離子導航標題，而不是指令視圖標題。
看到http://ionicframework.com/docs/api/directive/ionNavTitle/

Answer 10

這是真溶液：數據綁定離子NAV-標題指令

<ion-view> 
    <ion-nav-title ng-bind="content.title"></ion-nav-title> 
    <ion-content has-header="true" padding="true"> 
    <p>{{ content.description }}</p> 
    <p><a class="button button-small icon ion-arrow-left-b" href="#/tab/pets"> Back to home</a></p> 
    </ion-content> 
</ion-view> 

http://ionicframework.com/docs/api/directive/ionNavTitle/

Answer 11

我米採用輔助菜單離子V1.3.3基於模板。我嘗試了上述所有解決方案，但沒有運氣。 我使用$ ionicNavBarDelegate委託： http://ionicframework.com/docs/v1/api/service/ $ ionicNavBarDelegate/

我創造了我的角度控制器內部功能設置標題：

angular.module('app.controllers').controller('contributionsCtrl', contributionsCtrl); 

function contributionsCtrl($scope, $ionicNavBarDelegate) { 

    vm.setNavTitle = setNavTitle; 


    function setNavTitle() { 
     var title = "<span class='smc_color'> <i class='icon ion-images'></i> Your Title </span>" 
     $ionicNavBarDelegate.title(title); 
    } 
} 

然後我的HTML剛纔打電話的功能虛擬機中。setNavTitle

<ion-view overflow-scroll=true ng-init="vm.setNavTitle()"> 
    <ion-content></ion-content> 
</ion-view> 

Answer 12

<ion-view> <ion-nav-title>{{ result.title }}</ion-nav-title> 

這對我的工作