根据角度js局部视图动态更改标头

时间:2015-06-26 10:34:40

标签: javascript html angularjs partial-views html-heading

我知道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"
    })

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

class landingCtrl {
    public isFirstPlay: any;

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

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

1 个答案:

答案 0 :(得分: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"
 })
});

基本上每个视图都有自己的模板,控制器,网址和参数,您可以自己定义。

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

在这个例子中,我知道我在哪个州以及这个州有什么样的状态,例如你需要的标题

我希望这很有用