AngularJS在同一视图中使用两个控制器

我正在尝试使用一个angularJS web应用程序。我买了一个模板，其中包含所有控制器，路由和指令在一个文件中app.jsAngularJS在同一视图中使用两个控制器

这是我的第一个angularJS应用程序，或者实际上是我的第一个前端工作。试图成为一个完整的堆栈怪杰现在..：D

所以这里现在是我卡住的地方。该应用程序工作完全正常，但是当我添加一个新的控制器AuthCtrl它在另一个文件auth.js它给了我一个错误，说找不到AppCtrl。下面的HTML会让你更好地理解它。我已经指出了代码片段中的确切问题。

<!doctype html> 
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title>PropheSee Dashboard</title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> 
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> 
    <link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic" rel="stylesheet" type="text/css"> 
    <!-- Needs images, font... therefore can not be part of main.css --> 
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css"> 
    <link rel="stylesheet" href="bower_components/weather-icons/css/weather-icons.min.css"> 
    <!-- end Needs images --> 

     <link rel="stylesheet" href="styles/main.css"> 

</head> 
<body data-ng-app="app" id="app" class="app" data-custom-page="" data-off-canvas-nav="" data-ng-controller="AppCtrl" data-ng-class=" {'layout-boxed': admin.layout === 'boxed' } "> 

    <div data-ng-controller="AuthCtrl" data-ng-app="app"> 
     <ul> 
     <li ng-repeat="phone in phones"> 
      {{phone.name}} 
      <p>{{phone.snippet}}</p> 
     </li> 
     </ul> 
    </div> 
    <%-body%> 

    <script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script src="scripts/vendor.js"></script> 

    <script src="scripts/ui.js"></script> 

    <script src="scripts/app.js"></script> 


    <!-- 
    This is where the problem is. As soon as I add the following line to use AuthCtrl, 
    It says AppCtrl not found. Is it that I can't use more than one import for controllers? Or is there a problem in the way I am doing the imports? 
    --> 
    <script src="scripts/controllers/auth.js"></script> 

</body>

编辑 - AuthCtrl

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

app.controller('AuthCtrl', function ($scope) { 
    $scope.phones = [ 
    {'name': 'Nexus S', 
    'snippet': 'Fast just got faster with Nexus S.'}, 
    {'name': 'Motorola XOOM™ with Wi-Fi', 
    'snippet': 'The Next, Next Generation tablet.'}, 
    {'name': 'MOTOROLA XOOM™', 
    'snippet': 'The Next, Next Generation tablet.'} 
    ]; 
});

App.js片断

(function() { 
"use strict"; 
angular.module("app.chart.ctrls",[]) 
    .controller("chartCtrl",[ 
     "$scope", 
     function($scope){ ....

来源

2014-06-17 Sambhav Sharma

你能不能把你所有的文件到plnkr？（这可以帮助解决你的问题） –

好吧，我会尝试，从未使用过。另外模板中的app.js文件大约2500行。 :(YOu认为我仍然可以把它拉出来？ –

另外，当我删除使用AppCtrl的部分时，AuthCtrl部分也可以正常工作，它只是它们两个不能一起工作，如果这给出了任何想法.. –

的问题是，你是在auth.js文件这样做：

var app = angular.module('app',.......

从而宣告一个新的应用或覆盖一个在app.js

声明相反，你应该使用在app.js文件中定义相同的应用程序变量。

您需要声明的应用程序，并存储在一个变量的引用：

var yourApp = angular.module("app.controllers",[.........]);

然后添加控制器，将它们分配给其“持有”的应用程序定义的变量。这是怎样的chartCtrl控制器应在yourApp应用程序定义：

yourApp.controller("chartCtrl",[ 
     "$scope", 
     function($scope){ ....

然后你在你的auth.js文件控制器：

yourApp.controller('AuthCtrl', function ($scope) { 
    $scope.phones = [ 
    {'name': 'Nexus S', 
    'snippet': 'Fast just got faster with Nexus S.'}, 
    {'name': 'Motorola XOOM™ with Wi-Fi', 
    'snippet': 'The Next, Next Generation tablet.'}, 
    {'name': 'MOTOROLA XOOM™', 
    'snippet': 'The Next, Next Generation tablet.'} 
    ]; 
});

来源

2014-06-17 21:21:02 HaukurHaf

他们使用'angular.module（“app.controllers”，[]）.controller（）'来定义AppCtrl，但是当我为AuthCtrl执行相同的操作时，它给了我相同的错误。所以我可以看到模块又被取代了。那么如何创建一个新模块？如果你想要更多的代码，我可以添加它 –

在你的问题中粘贴app.js的第一行。 – HaukurHaf

我已更新问题 –

AngularJS在同一视图中使用两个控制器

回答

相关问题