web-dev-qa-db-ja.com

AngularJs：$ routeProviderを使用してコントローラーが2回呼び出されます

モジュールルート：

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'が2回呼び出されます。ここに何かが足りませんか？

controllerangularjs
44
Howard

私は同じ問題を抱えていましたが、ルーティングに愚かなバグがあるようです。何らかの種類のリダイレクトが行われています。

それを修正するために、hrefにスラッシュを追加しました：

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

あなたにとってもそれが解決することを願っています。

43
mpm

今日も同じ問題に直面しました。 $ routeProviderおよびHTMLにコントローラー名を追加しました。

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

そして私の見解では

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

ビューまたはルートプロバイダーからコントローラー名を削除できます。

70
dip

同様の問題がありました。ルートに末尾のスラッシュを追加しましたが、リンクには追加できませんでした。

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

このマークアップで

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

そして、AngularJSはブラウザのURLを$ routeProviderで定義されているものに修正します。

奇妙なことに、逆ではなく、リンクではなく、ルートでは末尾のスラッシュで動作するようです。末尾のスラッシュdo n'tが解決に一致し、コントローラーが2回呼び出されない限り、そうです！

15
Dan

私の場合、2つのng-viewディレクティブがありました。私はそれをラップしようとしましたが、意図せずに複製しました：

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

ラッパーを削除し、修正しました。

8
Josh Ribakoff

存在する場合、テンプレートページからng-controllerディレクティブを削除します。

8
Sarath

私は同じ問題を抱えていて、もしあなたがangular=.

私の場合、_<body ng-app>_がありましたが、angular.bootstrap(document,['app'])もあり、コントローラーの二重初期化を引き起こしました。

これが誰かの時間をいくらか節約できることを願っています。

1
Valentyn Shybanov

私も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タグを削除して解決しました

0
Sridhar Gudimela

あなたは複数のUIビューを持っているので

0
Muhammad Bilal

コントローラーをDOMの複数の要素に追加できるため、これが行われた場合にこの問題が発生する可能性があります。 ：

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

単一状態の部分ビューごとに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'*/
                }

            }
        })

これが他の人の助けになることを願っています。

0
Beny