Question

这是我的路由配置，我正在使用routeProvider绑定控制器来查看，而不是在我的视图中声明ng-controller仍然我的控制器加载两次，我搜索了很多解决方案，并尝试了所有的东西，但没有用。< / p>

 $routeProvider.when("/home", {
    controller: "homeController",
    templateUrl: "app/views/home.html"
}).when("/login", {
    controller: "loginController",
    templateUrl: "app/views/login.html"
}).when("/regcars", {
    controller: "RegCarsController",
    templateUrl: "app/views/client/RegCars.html"
}).otherwise({ redirectTo: "/home/" });

这是模板（视图）

  <div class="col-md-6 box box-success  pull-left">
    <div class="box-header with-border">
        <h3 class="box-title">My cars</h3>
        <div class="box-tools pull-right">
            <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
        </div>
    </div>
    <div class="box-body">
        {{CarName}}
    </div>
</div>

这是我的控制器

app.controller('RegCarsController', function ($scope) {
  $scope.CarName = "MyCar";
  alert('MyCar');
});

在上面的代码中显示警报两次。下面我有链接来调用视图，在href链接结束时尝试使用和删除斜杠

 <a href="#/regcars/">
    <i class="fa fa-car fa-2x"></i> <span>My Cars</span>
 </a>

Answer 1

控制器被多次调用的概念证明。奇怪。

另一方面 - the same code on JSFiddle - 表示控制器只执行/触发一次。

angular.module('app', ['ngRoute']).config(function($routeProvider) {
    $routeProvider.when("/home", {
      controller: "homeController",
      templateUrl: "app/views/home.html"
    }).when("/regcars", {
      controller: "RegCarsController",
      templateUrl: "app/views/client/RegCars.html"
    }).otherwise({ redirectTo: "/home" });
  })
  .run(function($templateCache) {
    $templateCache.put('app/views/home.html', '<div>home tempalte</div>');
    $templateCache.put('app/views/client/RegCars.html', '<div>cars template, car name: {{ CarName }}</div>');
  })
  .controller('homeController', function() {})
  .controller('RegCarsController', function($scope) {
    $scope.CarName = "MyCar";
    console.log('Called many times')
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.min.js"></script>

<div ng-app='app'>
  <ul><li><a href='#/'>Home</a></li><li><a href='#/regcars'>Cars</a></li></ul>
  <ng-view></ng-view>
</div>

为什么angularjs控制器加载两次

1 个答案: