0

我有一个非常简单的网站，它使用Angular.js来显示其内容。我2天前开始学习它，按照官方教程完全没有问题。

这是我的 js 文件：

var Site = angular.module('Website', []);

Site.config(function ($routeProvider) {
  $routeProvider
    .when('/home',  {templateUrl: 'parts/home.html', controller: 'RouteController'})  
    .when('/who',   {templateUrl: 'parts/who.html', controller: 'RouteController'})
    .when('/what',  {templateUrl: 'parts/what.html', controller: 'RouteController'})
    .when('/where', {templateUrl: 'parts/where.html', controller: 'RouteController'})
    .otherwise({redirectTo: '/home'});
});

function AppController ($scope, $rootScope, $http) {
    // Set the slug for menu active class
    $scope.$on('routeLoaded', function (event, args) {
        console.log(args);
        $scope.slug = args.slug;
    });
}

function RouteController ($scope, $rootScope, $routeParams) {
    // Getting the slug from $routeParams
   var slug = $routeParams.slug; 
   var pages = {
      "home": {
        "title": "Samuele Mattiuzzo",
      },

      "who": {
        "title": "All you'll get, won't blog"
      },

      "what": {
       "title": "Shenanigans about this website"
      },

      "where": {
        "title": "Where can you find me on the net?"
      }
    };
    $scope.$emit('routeLoaded', {slug: slug});
    $scope.page = pages[slug];
}

可以看到，很简单，只需要根据page slug返回一个页面标题即可。在模板中（我用 加载我的应用程序<body ng-controller="AppController">），在<ng-view>指令中我加载了其中一个部分模板（当前正在工作并显示静态内容），但我看不到{{page.title}}.

我已Batarang在浏览器上启用，并且正在使用 测试我的网站web-server.js，但我读到 Batarang 在变量和范围方面存在一些问题，并且总是返回未定义，所以这就是我添加该console.log语句的原因。不管我尝试打印什么（args、slug 或页面，显然在 js 的不同部分），它总是未定义的。

我在这里到底做错了什么？谢谢大家

4

1 回答 1

2

您的所有控制器都没有与您的“站点”相关联。

我相信，如果您将免费功能更改为与站点相关联，这应该会让您走上正轨。此外，您可以稍微简化代码，因为您要查找的信息包含在 $location 而不是 $routeParams 中。

Site.controller("RouteController", function($scope, $location) {
var slug = $location.path(); 
var pages = {
  "/home": {
    "title": "Samuele Mattiuzzo",
  },

  "/who": {
    "title": "All you'll get, won't blog"
  },

  "/what": {
   "title": "Shenanigans about this website"
  },

  "/where": {
    "title": "Where can you find me on the net?"
  }
};
$scope.page = pages[slug];
});

此外，在您的 AppController 中，您可以监视 $routeChangeSuccess 而不是从 RouteController 通知位置更改：

Site.controller("AppController", function($rootScope) {
  $rootScope.$on("$routeChangeSuccess", function() { \\do something }
});
于 2013-04-15T13:21:57.357 回答