AngularJS 控制器被调用了两次答案

【问题标题】：AngularJS controller is being called twiceAngularJS 控制器被调用了两次
【发布时间】：2015-05-14 04:22:24
【问题描述】：

我是 AngularJS 的新手。我正在学习 AngularJS。我正在尝试遵循不同的教程。我现在使用一些代码。在这方面我有一个问题。我的代码如下

index.html

<html ng-app="main_app">
    <head>
        <title>AngularJS Application</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">   
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
        <script src="js/route.js"></script>
    </head>
    <body ng-controller="main_controller">
        <div ng-view></div>
    </body>
</html>

route.js

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

app.config(function($routeProvider)
{
   $routeProvider

   // route for the home page
   .when('/', {
               templateUrl : 'pages/home.html',
               controller  : 'main_controller'
            });
});

app.controller('main_controller', function($scope) 
{
    alert('Yes');        
});

如果我运行此代码，我会得到两次alert('Yes');。

为什么我两次收到此警报？是正常操作还是我做错了什么？？

谢谢

更新

@Leo Farmer 我改变了 index.html 的结构如下

<html>
    <head>
        <title>AngularJS Application</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">   
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
        <script src="js/route.js"></script>
    </head>
    <body>
        <div ng-app="main_app">
            <div ng-controller="main_controller">
                <div ng-view></div>
            </div>
        </div>                
    </body>
</html>

但我仍然得到 alert() 两次。实际上，我关心的是“我做错了还是对了？？”我认为获得 alert() 两次意味着我做错了。

我的结构是否遵循良好的惯例？

谢谢

【问题讨论】：

控制器可以触发任意次数，所以它不是一个alert()的好地方...
感谢@dandavis 的回复。为什么任意次数？？我怎样才能控制这个任意次数？谢谢
更清楚一点：任何发生在控制器上的事情都会触发它，这不是一次性的“load()”式事件。您不能回收它，这将解决您的特定问题，但首先要了解为什么它是一个问题。
AngularJs: controller is called twice by using $routeProvider 的可能重复项

标签： javascript angularjs

【解决方案1】：

你的控制器被调用了两次。您将它放在您的 body 元素中（即警报一），然后您还将它分配为您的 pages/home.html 的控制器，您将其称为部分（即警报二）。

您的 body 元素中不需要它。我建议你把它从那里拿出来。

【讨论】：

我对确切解决方案的投票 +1 You don't need it in your body element. I recommend you take it out of there
更新：当您在 $routeProvider 中添加控制器时，您不需要将 ng-controller="main_controller" 添加到您的 div 中。你只需要在一个地方调用它。
这就是我的答案，在我身上取下它后它就消失了。谢谢！！！！
6年后，正确答案...

【解决方案2】：

就我而言，我在 html 和 $route 中使用了 <div id="userregistration" class="content-wrapper" ng-controller="UserRegistrationController">，所以它调用了两次。修复后我在 html 中删除了

【讨论】：

【解决方案3】：

我建议修改您的警报代码，使其由按钮或其他事件触发。您会看到控制器的异步调用，由于加载和处理页面的时间，导致该代码运行两次。

我会先尝试在正文底部加载 Javascript，以便在加载 JavaScript 之前加载整个页面。

或者，您可以尝试使用 $timeout 服务添加超时，以在整个页面加载之前延迟运行警报一小段时间。

【讨论】：

谢谢@bman4789。这意味着加载时一次，处理时另一次？？谢谢
这主要是废话。通常情况下不会多次调用控制器。它在这里被调用了两次，因为它是专门（尽管是无意的）指示这样做的。

【解决方案4】：

因为：

您在 anguler 路由模块和模板中的 ng-controller 指令中使用相同的控制器。如果你在配置的时候在 route 模块中使用了一个控制器，那么在模板中使用与 ng-controller 相同的控制器是没有用的。 ng-view 指令在这里就足够了。
由于您在路由配置和 ng-controller 中都使用相同的控制器，这就是您收到两次警报的原因。您应该在角度路由或 ng-controller 指令中使用您的控制器
如果您删除路由选项，您只会收到一次警报。

【讨论】：