Javascript AngularJS服务无法正常工作_Javascript_Angularjs_Angularjs Scope_Angular Services

Javascript AngularJS服务无法正常工作

javascript angularjs

Javascript AngularJS服务无法正常工作,javascript,angularjs,angularjs-scope,angular-services,Javascript,Angularjs,Angularjs Scope,Angular Services,我想在我的webapp中创建动态页面标题。我已经创建了一个应该对我有帮助的服务，但它不起作用。PageTitleService.getTitle始终返回未定义。有什么不对劲吗？要运行此代码，应该执行哪些操作？代码如下： app.js var app = angular.module('app', ['restangular']) .config(function ($routeProvider) { $routeProvider.when('/index', { templateUrl:

我想在我的webapp中创建动态页面标题。我已经创建了一个应该对我有帮助的服务，但它不起作用。PageTitleService.getTitle始终返回未定义。有什么不对劲吗？要运行此代码，应该执行哪些操作？代码如下：

app.js

var app = angular.module('app', ['restangular'])
.config(function ($routeProvider) {
$routeProvider.when('/index', {
    templateUrl: 'views/main/index.html',
    controller: 'PageController'
}); 
$routeProvider.when('/pages/:name', {
    templateUrl: 'views/page/show.html',
    controller: 'PageController'
});                         
$routeProvider.otherwise({
    redirectTo: '/index'
});
});
app.defaultPageName = 'home';
app.name = 'Custom name';

PageTitleService.js：

app.factory('PageTitleService',
function() {
    var title;
    return {
        setTitle : function(t) {
            title = t;
        },
        getTitle : function() {
            return title + ' - ' + app.name;
        }
    }
});

AppController.js

app.controller('AppController', ['$scope', 'PageTitleService',
function($scope, PageTitleService) {
    $scope.pageTitle = PageTitleService.getTitle();
}]);

PageContorller.js

app.controller('PageController',
['$location', '$routeParams', '$scope', 'PageService', 'PageTitleService',
    function($location, $routeParams, $scope, PageService, PageTitleService) {
        var pageName = $routeParams.name !== undefined ? $routeParams.name : app.defaultPageName;
        var page = PageService.getPage(pageName);

        PageTitleService.setTitle(page.title); //page.title is always a string

        $scope.title = page.title;
        $scope.content = page.content;
    }
]);

index.html开始：

<!DOCTYPE html>
<html lang="en" data-ng-app="app" data-ng-controller="AppController">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <title>{{ pageTitle }}</title>
    </head>

根据我的第一印象，我建议尝试以下方法：

app.factory('PageTitleService',
function() {
    this.title = "home";
    var self = this;
    return {

        setTitle : function(t) {
            self.title = t;
        },
        getTitle : function() {
            self.title + ' - ' + app.name;
        }
    }
});

AppController的线路只运行一次

$scope.pageTitle = PageTitleService.getTitle();
// we didn't set title before, getTitle() returns undefined.

之后，您可以使用setTitle'something'更改标题，但$scope.pageTitle仍将是未定义的

相反，您可以做的是：

$scope.getPageTitle = PageTitleService.getTitle;

然后在视图中

<span ng-bind="getPageTitle()"></span>

使用它

如果它是这样写的，你就不必写getter和setter了。还有一个问题。{{getPageTitle}}与它们之间的区别是什么？它们基本上做相同的事情，但是，在编译angular应用程序之前，用户将看到原始形式的{{getPageTitle}}未编译，在ng bind中，它将为空。e、你甚至能做到？。那么它会表现出来吗？那么在它准备好之前该怎么数。