Question

我有一个非常简单的网站，使用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];
}

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

我的浏览器启用了Batarang我正在使用web-server.js测试我的网站，但我读过Batarang有一些变量和范围问题，并且总是返回undefined，所以这就是为什么我添加了console.log声明。无论我尝试打印什么（args，slug或页面，显然在js的不同部分），它总是未定义的。

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

Answer 1

您的所有控制器均未与您的“网站”相关联。

我相信如果您将自由功能更改为与网站相关联，则应该让您走上正确的轨道。此外，您可以稍微简化您的代码，因为您要查找的信息包含在$ 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 }
});

$ scope中的所有变量在Angular.js中都未定义

1 个答案: