javascript - 基于Angular JS部分 View 动态更改标题

Question

我知道this问题几乎相同，但是我的实现需要稍微改变，我不知道该怎么做。

在我链接的答案中，解决方案涉及使用

app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $routeProvider.
    when('/test1', {template: 'page 1', controller: Test1Ctrl})
...

app.factory('Page', function(){
    var title = 'default';
    return {
    title: function() { return title; },
    setTitle: function(newTitle) { title = newTitle; }
    };
});

function Test1Ctrl($scope, Page) {
  Page.setTitle('title1');
}
...

在 app.js 文件中。但是，我已经有了以下形式的配置:

...
$routeProvider
    .when("/", {
      templateUrl: "partials/landing.html", controller:"landingCtrl"
    })

Controller landingCtrl在另一个文件controllers.ts中定义，如下所示:

class landingCtrl {
    public isFirstPlay: any;

    constructor($scope) {
        $scope.vm = this;
        this.isFirstPlay = true;
    }
...

那么我如何在与此布局链接的答案中实现表单的功能？

Answer 1

好吧，我们采取了一种非常不同的方法来为每个 View 创建动态信息。

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {

$ionicConfigProvider.views.transition('none');

$stateProvider

 .state('login', {
 params: 8,
 url: "/login",
 templateUrl: "templates/login.html",
 controller: "LoginCtrl"
 })

 .state('settings', {
   params: 8,
   url: '/settings',
   templateUrl: "templates/settings.html",
   controller: "SettingsCtrl"
 })
});

基本上每个 View 都有自己的模板、 Controller 、url 和参数，您可以自己定义。

.state('settings', {
  params: {title: Put the title u want here},
  url: '/settings',
  templateUrl: "templates/settings.html",
  controller: "SettingsCtrl"
})

话虽如此，您可以轻松读取主 Controller 中的参数

 $rootScope.$on('$stateChangeSuccess', function (ev, to, toParams, from, fromParams) {
    $rootScope.previousState = from.name;
    $rootScope.currentState = to.name;
    // gets the name of the current state and sets it as class in the ion-nav-bar!
    $scope.stateName = $rootScope.currentState;
});

在此示例中，无论我走到哪里，我都知道我处于哪个状态以及该状态有哪些参数，例如您需要的标题

希望这对您有帮助