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

AngularJS using two controllers in the same view

本文关键字：两个 控制器 同一个 视图 AngularJS      更新时间：2023-09-26

我正在尝试使用一个angularJS web应用程序。我买了一个模板，它的所有控制器，路由和指令在一个单一的文件app.js

这是我的第一个angularJS应用，或者实际上是我的第一个前端工作。现在正努力成为一个全栈极客…: D

所以这就是我现在卡住的地方。应用程序工作完全正常，但是当我在另一个文件auth.js中添加一个新的控制器AuthCtrl时，它给了我一个错误，说没有找到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>

Edit - 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.'}
  ];
});
<<p> App.js片段/strong> 
(function() {
"use strict";
angular.module("app.chart.ctrls",[])
    .controller("chartCtrl",[
        "$scope",
        function($scope){ ....

问题是您在auth.js文件中这样做:

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

从而声明一个新的应用程序或覆盖在app.js

中声明的应用程序

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

你需要声明应用程序，并在一个变量中存储对它的引用:

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

然后要添加控制器，将它们赋值给"保存"应用定义的变量。在yourApp应用程序上应该这样定义chartCtrl控制器:

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.'}
  ];
});
相关文章：