Question

AngularJS的新手，目前正致力于一个让我熟悉该技术的入门项目。

我的应用程序基于angular-seed项目，该项目使用ngRoute显示组件，具体取决于所遵循的链接。我有一个组件pageHeader，我用它来定义页面顶部的链接：

angular.
  module('DataStructureVisualizer').
  component('pageHeader', {
    template:
      '<div id="header">' + 
      '<center>' + 
        '<a href="#!/BinaryTree">Binary Tree</a>' + 
        '<a href="#!/Stack">Stack</a>' + 
        '<a href="#!/Queue">Queue</a>' + 
        '<a href="#!/Heap">Heap</a>' + 
        '<a href="#!/LinkedList">Linked List</a>' + 
      '</center>' + 
      '</div>',
    controller: function PageHeaderController() {

    }
  });

这样在index.html中我可以指定标签并让AngularJS用标题HTML填充DOM。

这很好用，但当我链接另一个定义以下控制器的脚本时：

angular.
  module('DataStructureVisualizer', []).
  controller('DragDropController', function DragDropController($scope) {
    $scope.captureCoordinate = function($event) {
      $scope.x = $event.x;
      $scope.y = $event.y;
    }
  });

标题消失。这是什么原因？我不确定如何调试应用程序，因为Chrome JS控制台没有任何输出，NodeJS服务器没有吐出任何错误（不知道为什么会这样，因为我没有做任何服务器端东西，但我想应该提一下。）

这就是我的app.js的样子：

'use strict';

// Declare app level module which depends on views, and components
angular.module('DataStructureVisualizer', [
  'ngRoute',
  'DataStructureVisualizer.bst',
  'DataStructureVisualizer.heap'
]).
config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
  $locationProvider.hashPrefix('!');

  $routeProvider.otherwise({redirectTo: '/BinaryTree'});
}]);

Answer 1

使用module('DataStructureVisualizer', [])，您实际上是在告诉angular将其视为新module，这就是为什么它不起作用因为您已经在{{{}}中定义了一个名称相同的模块{1}}文件。你应该把它改成

app.js

希望这有帮助！

在AngularJS

1 个答案: