Question

我是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（）意味着我做错了。

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

由于

Answer 1

您的控制器被调用两次。你在你的身体元素（这是第一个警报）中有它，然后你也将它指定为你的pages / home.html的控制器，你称之为部分（这是警报二）。

你的身体元素中不需要它。我建议你把它拿出来。

Answer 2

在我的情况下，我在html和<div id="userregistration" class="content-wrapper" ng-controller="UserRegistrationController">中使用了$route，因此它调用了两次。之后我在html中删除它已修复

Answer 3

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

我首先尝试在您的身体底部加载您的Javascript，以便在JavaScript之前加载整个页面。

或者，您可以尝试使用$timeout服务添加超时，以延迟短时间运行警报，直到整个页面加载为止。

Answer 4

由于：

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

AngularJS控制器被调用两次

4 个答案: