Question

我正在使用ngRoute。 index.html：

    <body  ng-app="mainApp" ng-controller="AboutController">    
    <div id="header">
    <h1>Employee Gallery</h1>
    </div>
<div id="leftpanel">
    <!--a href="#/displayEmp" id="load">Display</a><br-->
    <a href="#/display">Display</a><br>    
    Insert<br>
    Delete
</div>

<!-- Angular dynamic content-->
<div   ng-view id="section">      
</div>

main.js：

var app = angular.module('mainApp',['ngRoute']);
app.config(function($routeProvider) {
    $routeProvider
        .when('/display', {
            templateUrl: 'pages/display.html',
            controller: 'DisplayController'
        })
        .when('/', {
            templateUrl: 'pages/about.html',
            controller: 'AboutController'
        });
        /*.otherwise({
            redirectTo: '/'
        });*/
});
app.controller('AboutController', function($scope) {
    console.log("In AboutController");
    $scope.msg = "This app performs CRUD operations";
});

如果在index.html的body标签中指定了ng-app =“mainApp”，则会打印“在AboutController中”两次。如果移动了ng-app =“mainApp” 那么它应该打印一次。在这两种情况下，输出都是相同的。 1）但需要理解为什么控制器在一种情况下执行两次而在另一种情况下执行一次。 2）在display.html中，console.log未在标签内打印。

Answer 1

您正在运行两次ctrl代码。一旦进入<body>标签，另一个进入路线定义。您不需要在ng-controller="AboutController"中定义<body>，路由器将在您的模板html中为您执行此操作，该路由为templateUrl: 'pages/about.html'。

使用路由器时，您不需要像上面那样在html元素上明确设置ng-controller指令，路由器会为您声明。

<body ng-app="mainApp">    
    <div id="header">
        <h1>Employee Gallery</h1>
    </div>
    <div id="leftpanel">
        <!--a href="#/displayEmp" id="load">Display</a><br-->
        <a href="#/display">Display</a><br>    
        Insert<br>
        Delete
    </div>

    <!-- Angular dynamic content-->
    <div ng-view id="section"></div>
</body>

进一步阅读：Combating AngularJS executing controller twice

Angular webapp使用ngRoute执行两次控制器构造函数

1 个答案: