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

Posted

技术标签:

【中文标题】AngularJs:使用 $routeProvider 调用控制器两次【英文标题】:AngularJs: controller is called twice by using $routeProvider 【发布时间】:2013-01-21 16:25:58 【问题描述】:

模块路由:

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”都会被调用两次。我在这里错过了什么吗?

【问题讨论】:

build-content.html 有 `ng-controller="BuildInfoController" 吗?如果是这样,请尝试删除它。 没有像你说的那样的 ng-controller。无论如何,非常感谢。我已经使用 camus 的解决方案修复了它。 Combating AngularJS executing controller twice的可能重复 我遇到了类似的问题,但在我的情况下,控制器仅在页面刷新时被触发。如果我从链接导航到页面,控制器只会触发一次,正如预期的那样。但是,如果我刷新页面,它会触发两次。有什么建议吗? 【参考方案1】:

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

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

在我看来

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

您可以从视图或路由提供程序中删除控制器名称。

【讨论】:

为我工作!谢谢。 这正是发生的事情!谢谢!【参考方案2】:

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

为了修复它,我只是在 href 中添加了一个斜杠,例如:

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

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

【讨论】:

非常感谢。这个奇怪的问题昨晚差点要了我的命。 ^_^ 非常感谢。我永远不会想到:D 不错的@mpm,你为我节省了很多调试时间 这个解决方案***.com/a/15535724/1387163帮助我解决了同样的问题 感谢您的回答。我快要失去希望了。这是一个已知的错误?我有一堆类似的控制器和调用,只有一个我需要在 URL 的末尾添加一个斜杠。仅在通过 ng-href 调用时发生,而不是在直接调用路由时发生。【参考方案3】:

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

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

使用此标记

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

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

奇怪的是,相反的似乎也适用于链接中的斜杠而不是路径。似乎只要尾随斜杠匹配解析并且控制器不会被调用两次!

【讨论】:

你刚刚拯救了我的周末! 非常感谢。我们注意到完全相同的事情。我们小心翼翼地保持路由和 href 在尾部斜杠方面保持一致,但无法使其正常工作。只有在我们遵循您的建议并确保它们与众不同时,它才会起作用。【参考方案4】:

我的情况是有 2 个 ng-view 指令。我试图包装它,但无意中复制了它:

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

去掉包装,修复它。

【讨论】:

这发生在我之前,我的 index.html 中有两个完全不同的应用程序部分,一个用于我的登录/注册,另一个用于应用程序本身,两者都包含 ng-view。跨度> @DominicGoulet 我的 index.html 中有两个不同的 ng-view。所以控制器被调用了两次。除了删除 ng-views 之外,是否有任何解决方案。我不想删除这 2 个 ng-views。【参考方案5】:

如果存在,请从模板页面中删除 ng-controller 指令。

【讨论】:

它有效!我可以知道原因吗,我们为什么要删除 ng-controller 明白,已经添加在 when('/trending/', templateUrl: "./templates/trending.html", controller: 'TrendingController' ) 中,现在不应该在模板中 谢谢!我从来没想过!【参考方案6】:

我遇到了同样的问题,发现如果你两次引导你的角度,你可能会遇到同样的错误。

在我的情况下,我有 &lt;body ng-app&gt;angular.bootstrap(document,['app']),这导致了控制器的双重初始化。

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

【讨论】:

【参考方案7】:

一个控制器可以被添加到 DOM 的多个元素中,所以如果这样做了,就会出现这个问题,例如:

  <div id="myDiv1" ng-controller="myController" ....></div>
  ....
  <div id="myDiv2" ng-controller="myController" ....></div>

【讨论】:

【参考方案8】:

我为单个状态的每个视图部分声明了 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'*/
                

            
        )

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

【讨论】:

【参考方案9】:

我也遇到了与 customDirective 类似的问题,并且无意中复制了我的控制器。

<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 标签解决了这个问题

【讨论】:

【参考方案10】:

因为你有多个 ui-view

【讨论】:

以上是关于AngularJs:使用 $routeProvider 调用控制器两次的主要内容,如果未能解决你的问题,请参考以下文章

AngularJs routeProvider http状态403

AngularJS 的 $routeProvider templateUrl 总是使用 Express 返回 404

angularJS $routeProvider

angularjs $routeProvider 不包括视图(未知提供者)

angularjs 报错Unknown provider: $routeProvider

将 Django URL 与 AngularJs routeProvider 一起使用