在导航栏中更改标题来自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>

做什么？我将如何使用它？ – 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>

关于广播的一条评论，因为它位于主循环中，并且对scope元素有直接影响，所以您不需要广播更改，因为它会直接更新任何{{title.name}}绑定的元素。 –

哇，好吧，虽然plunkr似乎没有显示。 – user3718908

我更新了plunker链接，我可以从多个浏览器中获得它，因此它现在应该可用。 –

在导航栏中更改标题来自Ctrl

相关推荐