在導航欄中更改標題來自Ctrl

你好，我是新來的離子在我的應用程序，我想要做的是改變基於用戶頁面的應用程序頁面的標題。例如，如果用戶在主頁上，應該說首頁如果他們在另一個頁面上，應該說另一個在頂部。在導航欄中更改標題來自Ctrl

每個頁面都有它自己的控制器，我創造了我稱爲AppCtrl應用父控制器，並把上窗格：

<ion-pane ng-controller="AppCtrl"> 
</ion-pane>

這是我AppCtrl：

// Root Controller 
     .controller("AppCtrl", function($rootScope, $scope) { 

      // Adding Sum Property To Array Prototype 
      Array.prototype.sum = function (prop) { 
       var total = 0 
       for (var i = 0, _len = this.length; i < _len; i++) { 
        total += this[i][prop] 
       } 
       return total 
      } 

      $scope.title = { 
       name: '', 
       icon: '' 
      }; 

      // Function To Change Pane Title 
      $rootScope.changeTitle = function(name, icon) { 

       $rootScope.title = { 
        name: name, 
        icon: icon 
       }; 

       $rootScope.$broadcast('TITLE_UPDATED', $rootScope.title); 

      } 

      $scope.$on('TITLE_UPDATED', function(event, title) { 
       $scope.title = { 
        name: title.name, 
        icon: title.icon 
       }; 
      }) 

     })

這是我的主頁控制器：

// Home View Controller 
     .controller("HomeCtrl", function($scope, $rootScope) { 

      // Setting Title 
      $scope.changeTitle('Home', 'ion-home'); 

     })

這是我的index.html

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <title></title> 


    <!-- compiled css output --> 
    <link href="css/ionic.app.css" rel="stylesheet"> 

    <!-- custom css styles --> 
    <link href="css/style.css" rel="stylesheet"> 

    <!-- ionic/angularjs js --> 
    <script src="lib/ionic/js/ionic.bundle.js"></script> 

    <!-- cordova script (this will be a 404 during development) --> 
    <script src="cordova.js"></script> 

    <!-- your app's js --> 
    <script src="js/app.js"></script> 
    <script src="js/app.ctrls.js"></script> 
</head> 
<body ng-app="mtgh"> 

<ion-pane ng-controller="AppCtrl"> 
    <!-- </header + navbar> --> 
    <ion-side-menus enable-menu-with-back-views="false"> 
     <ion-side-menu-content> 
      <ion-nav-bar class="bar-stable bar-header-shadow has-header"> 
       <ion-nav-back-button> 
       </ion-nav-back-button> 

       <ion-nav-buttons side="left"> 
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left"> 
        </button> 

        <h1 class="title"> 
         <i class="{{ title.icon }}"></i> {{ title.name }} 
        </h1> 
       </ion-nav-buttons> 
      </ion-nav-bar> 

      <ion-nav-view name="content"> 
      </ion-nav-view> 
     </ion-side-menu-content> 

     <h1 class="title"> 
      <img src="img/logo-94x35.png" alt="Starter" title="Starter"> 
     </h1> 

     <ion-side-menu side="left"> 
      <ion-header-bar class="bar-stable"> 
       <h1 class="title"> 
        <img src="img/logo-94x35.png" alt="Starter" title="Starter"> 
       </h1> 
      </ion-header-bar> 
      <ion-content> 
       <ion-list> 
        <ion-item menu-close="" ng-click="login()"> 
         Login 
        </ion-item> 
        <ion-item menu-close="" href="#/app/search"> 
         Search 
        </ion-item> 
        <ion-item menu-close="" href="#/app/browse"> 
         Browse 
        </ion-item> 
        <ion-item menu-close="" href="#/app/playlists"> 
         Playlists 
        </ion-item> 
       </ion-list> 
      </ion-content> 
     </ion-side-menu> 
    </ion-side-menus> 
    <!-- </header> --> 

    <!-- <footer> --> 
    <ion-footer-bar class="bar-stable"> 
     <h1 class="title">Starter</h1> 
    </ion-footer-bar> 
    <!-- </footer> --> 

</ion-pane> 

</body> 
</html>

來源

2015-11-13 user3718908

做什麼？我將如何使用它？ – user3718908

我想設置一個不使用狀態或位置名稱/路徑的自定義名稱。 – user3718908

我沒有看到任何內容，它允許我爲我的頁面設置自定義標題。 – user3718908

您可以將changeTitle函數設置爲存在於run方法中，因此它是全局設置的。以下plunker使用title.name顯示了這一點，您只需要在主導航欄中替換您的標題元素即可。

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

你會發現太多，我擺脫了在控制器中的局部範圍標題引用的，這是因爲這樣的範圍在AngularJS層次，如果不能找到該項目當前的子範圍它將查找鏈，在這種情況下直接指向rootScope。

代碼以供參考：

app.js：

var app = angular.module('plunker', ['ngRoute']); 

app.config(['$routeProvider', function($routeProvider){ 
    $routeProvider. 
    when('/', { 
    controller: 'MainCtrl', 
    template: '<div><a href="#/home">Go Home</a></div>' 
    }). 
    when('/home', { 
    controller: 'HomeCtrl', 
    template: '<div>At Home <a href="#/">Go Back</a></div>' 
    }) 
}]); 

app.run(['$rootScope',function($rootScope){ 
    $rootScope.changeTitle = function(name, icon) { 
    $rootScope.title = { 
     name: name, 
     icon: icon 
    }; 
    } 
}]); 

app.controller('MainCtrl', function($scope) { 
    $scope.changeTitle('Main', 'ion-settings'); 
}); 

app.controller('HomeCtrl', function($scope, $rootScope){ 
    $scope.changeTitle('Home', 'ion-home'); 
})

的index.html：

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

    <head> 
    <meta charset="utf-8" /> 
    <title>{{title.name}}</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js" data-semver="1.4.7"></script> 
    <script data-require="[email protected]" data-semver="1.4.6" src="https://code.angularjs.org/1.4.6/angular-route.js"></script> 
    <script src="app.js"></script> 
    </head> 

    <body> 
    <h1>{{title.name}}</h1> 
    <div ng-view></div> 
    </body> 

</html>

來源

2015-11-13 18:08:30

關於廣播的一條評論，因爲它位於主循環中，並且對scope元素有直接影響，所以您不需要廣播更改，因爲它會直接更新任何{{title.name}}綁定的元素。 –

哇，好吧，雖然plunkr似乎沒有顯示。 – user3718908

我更新了plunker鏈接，我可以從多個瀏覽器中獲得它，因此它現在應該可用。 –

在導航欄中更改標題來自Ctrl

回答

相關問題