AngularJs:使用$ routeProvid两次调用控制器

模块路线:

var switchModule = angular.module('switchModule', []);

switchModule.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
    when('/build-content', {templateUrl: 'build-content.html', controller: BuildInfoController});
}]);

控制器:

function BuildInfoController($http, $scope){
    alert("hello");
}

HTML:

<html ng-app="switchModule">
...
<body>
    <ul>
        <li><a href="#build-content"/></a></li>
    </ul>
    <div class="ng-view"></div>
</body>
...

每次我单击超链接''时,“ BuildInfoController”将被调用两次。 我在这里想念什么吗?

Howard asked 2020-06-30T06:16:03Z
11个解决方案
71 votes

我今天也面临着同样的问题。 我在$ routeProvider和html中添加了控制器名称。

$routeProvider
    .when('/login', {
            controller: 'LoginController',
            templateUrl: 'html/views/log-in.html'
     })

在我看来

<div class="personalDetails" ng-controller="LoginController"> </div>

您可以从视图或routeprovider中删除控制器名称。

dip answered 2020-06-30T06:17:06Z
43 votes

我遇到了同样的问题,并且似乎存在与路由有关的愚蠢错误。 正在进行某种重定向。

为了解决这个问题,我在href中添加了一个斜杠,例如:

<li><a href="#/build-content/"></a></li>

我希望它也能为您解决问题。

mpm answered 2020-06-30T06:16:38Z
16 votes

我有类似的问题。 我发现在路由中添加了斜杠,但在链接中却没有按预期工作。

$routeProvider.
when('/build-content/',...);

有了这个标记

<li><a href="/build-content">Content</a></li>

然后,AngularJS会将浏览器中的URL更正为$ routeProvider中定义的URL。

奇怪的是,相反的方法似乎也可以在链接中而不是在路径中使用尾部斜杠。 看起来只要尾部斜杠与解析符不匹配且控制器不会被调用两次!

Dan answered 2020-06-30T06:17:40Z
8 votes

我的案例是有2个ng-view指令。 我尝试将其包装,但无意中将其复制:

<div class="ng-view">
    <div ng-view></div>
</div>

拆下包装纸,将其固定。

Josh Ribakoff answered 2020-06-30T06:18:04Z
8 votes

从模板页面中删除ng-controller伪指令(如果存在)。

Sarath answered 2020-06-30T06:18:24Z
2 votes

我遇到了同样的问题,发现如果两次自举,都会出现相同的错误。

以我为例,我有<body ng-app>,但也有angular.bootstrap(document,['app']),这引起了控制器的双重初始化。

希望这可以节省一些时间。

Valentyn Shybanov answered 2020-06-30T06:18:53Z
1 votes

可以将控制器添加到DOM的多个元素中,因此,如果已完成此问题,例如 :

  <div id="myDiv1" ng-controller="myController" ....></div>
  ....
  <div id="myDiv2" ng-controller="myController" ....></div>
Chris Halcrow answered 2020-06-30T06:19:13Z
0 votes

我在一个状态下为每个视图局部声明了SomeController。这导致重复的事件触发。

 .state('chat', {
            url: '/',
            views: {
                'content@': {
                    templateUrl: 'views/chat_wv1.html',
                    controller: 'ChatController'
                },
                'form@': {
                    templateUrl: 'views/chat_wv_placeholder.html',
                    controller: 'ViewController'
                },
                'sidePanel@': {
                     templateUrl: 'views/sidePanel_wv.html'
                     /* removing this part solved my issue*/
                     /*controller: 'ChatController'*/
                }

            }
        })

希望这对其他人有所帮助。

Beny answered 2020-06-30T06:19:37Z
0 votes

自定义指令也有类似的问题,并且无意中复制了控制器。

<html>
   <body ng-app="MyApp" ng-controller="MyDirectiveCtrl">
      <my-directive></my-directive>
   </body>
</html>

angular.directive('myDirectivie', [function() {
   return {
         restrict: 'E',
         controller: 'MyDirectiveCtrl',

         ...

   }
}]);

我通过在身体水平上删除ng-controller标签解决了它

Sridhar Gudimela answered 2020-06-30T06:20:01Z
0 votes

这是因为您有多个ui视图

Muhammad Bilal answered 2020-06-30T06:20:21Z
-1 votes

同样在这里我的案例是有2个ng-view指令。

enter code here删除了重复的即ng-view,并对其进行了修复。

Dinesh Singh answered 2020-06-30T06:20:46Z
translate from https://stackoverflow.com:/questions/14442954/angularjs-controller-is-called-twice-by-using-routeprovider