基于角度js局部视图动态更改标题

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"
    })

在另一个文件controllers.ts 中定义控制器landingCtrl，如下所示：

class landingCtrl {
    public isFirstPlay: any;

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

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

Answer 1

好的，所以我们采用了一种非常不同的方法来为每个视图创建动态信息。

.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"
 })
});

基本上每个视图都有自己的模板、控制器、url 和参数，您可以自行定义。

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

你可以轻松地读取主控制器中的参数

 $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;
});

在这个例子中，无论我走到哪里，我都知道我在哪个状态以及这个状态有什么参数，例如你需要的标题

希望对你有帮助