Question

我尝试使用UI-ROUTER动态更改页面标题。将显示的页面标题是将在URL :courses中使用的相同帽子我知道我只是将检索到的数据绑定到页面标题但是我是角度和JS的新手我无法做到这一点。这是我的代码：

angular
    .module('myApp.courses', [ 'ui.router', 'ngResource' ])
    .config(
            [
                    '$stateProvider',
                    '$urlRouterProvider',
                    function($stateProvider, $urlRouterProvider) {
                        $stateProvider
                                .state(
                                        "introduction_to",
                                        {
                                            url : "courses/:courses",
                                            views : {
                                                "mainbody" : {
                                                    templateUrl : "resources/html/course_details.html"
                                                },
                                                "derivativebody" : {
                                                    templateUrl : "resources/html/course_chapter.html"
                                                }
                                            },
                                            data : {
                                                pageTitle : "introduction_to",
                                                authenticate : true
                                            }
                                        });}]);

这里的页面标题没有动态设置，我想要做的就是让页面标题像这样：引入+＆＃39;课程名称＆＃39;。我尝试使用$stateParams.courses，但它没有用，有些像这样

data :{
                pageTitle : "introduction_to" + $stateParams.courses,
                authenticate : true
            }

我使用此控制器更改标题

.controller(
            'AppController',
            function AppController($scope, $location,$state, sessionService) {
                $scope.$on('$stateChangeSuccess', function(event, toState,
                        toParams, fromState, fromParams) {
                    if (angular.isDefined(toState.data.pageTitle)) {
                        $scope.pageTitle = toState.data.pageTitle
                                + '| MyAcademy';
                    }
                    if ((toState.data.authenticate
                            && !sessionService.isLoggedIn())) {
                        $state.go("login");
                        event.preventDefault();
                    }
                });
            });

从此ng-href="courses/{{name.name}}"收到标题名称这是我的HTML，我获得了标题

<div class="row l-b-margin">
                <div class="col-md-4" ng-repeat="name in Courses.slice(0,3)">
                    <div class="well well-white">
                        <img alt="R Programming" class="center-block l-b-margin"
                            height="100" ng-src="{{name.logo}}" width="100" />
                        <h6 style="text-align: center; color: #516979; font-size: 21px">{{name.name}}</h6>
                        <p class="text-space l-b-margin">Write your first code here</p>
                        <a class="rounded-button cta-border-button center-block m-button"
                            ng-href="courses/{{name.name}}">Start Course</a>
                    </div>
                </div>
            </div>

在angularJS中动态更新页面标题

0 个答案: