Question

我正在尝试将viewTitle添加到基本视图或根网页应用页面，例如

根页

 <div ng-app="app"> 
     {{viewTitle}}
     <div ui-view=""></div>
 </div>

我可以在控制器中更改viewTitle吗？

控制器-1

var myApp = angular.module(app, []);
myApp.controller('ChildController', ['$scope', function($scope) {
  // how to update viewTitle here ?
}]);

Answer 1

一种解决方案可能是这样的：如果您使用ui-router，您可以在状态中添加标题:(我用它来翻译标题）

.state('login', {
            url: '/login',
            controller: 'AdminLoginController',
            templateUrl: 'app/admin/views/login.html',
            title: {
                'es': 'Iniciar sesión',
                'en': 'Login',
                'de': 'Einloggen'
            }
        })
.state('panelAdmin', {
            url: '',
            controller: 'AdminHomeController',
            templateUrl: 'app/admin/views/panelAdmin.html',
            title: {
                'es': 'Panel de administración',
                'en': 'Control panel',
                'de': 'Führungspanel'
            }
        })

并在$ stateChangeStart中重新加载标题：

$rootScope.$on("$stateChangeStart", function (event, toState, toParams, fromState, fromParams) {

  if (toState.title) {
    $rootScope.title = toState.title[$rootScope.cultureLang];
  }

});

在index.html中：

<title>{{title}}</title>

Answer 2

我认为我们可以将$rootScope用于此目的。请参阅下文。

html模板

<body ng-app="myApp" >  
        {{viewTitle}}
        <div ui-view=""></div>
    </div> 
</body>

js文件

myApp.config（function（$ stateProvider，$ urlRouterProvider）{

$urlRouterProvider.otherwise('/home');

$stateProvider
    .state('home', {
        url: '/',
        template: '<h1>From nested view </h1>',
        controller: function($rootScope)
        {
            $rootScope.viewTitle = "home";
        }
    });

}）;

希望有所帮助

在控制器angularjs中使用全局模板变量

2 个答案: