在 AngularJS 中添加新控制器时组件消失

Question

AngularJS 的新手，目前正在从事一个介绍性项目，以使我熟悉这项技术。

我的应用程序基于 angular-seed 项目，该项目使用 ngRoute 根据 link 所遵循的内容来显示组件。我有一个组件 pageHeader，我用它来定义页面顶部的 links:

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 用 header HTML.[=15= 填写 DOM ]

这工作正常，但是当我 link 在另一个定义以下控制器的脚本中时：

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

header 消失。这是什么原因？我不确定如何调试应用程序，因为 Chrome JS 控制台没有任何输出并且 NodeJS 服务器没有吐出任何错误（不知道为什么会这样，因为我没有这样做任何 server-side 东西，但我认为我应该提到）。

这是我的 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 这就是它不起作用的原因，因为你已经在中定义了一个具有相同名称的模块你的 app.js 文件。您应该将其更改为

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

希望对您有所帮助！

在 AngularJS 中添加新控制器时组件消失

Component disappears when adding a new controller in AngularJS

javascript

angularjs

ng-controller