控制器在 Ionic (AngularJS) 中被调用两次答案

【问题标题】：Controller being called twice in Ionic (AngularJS)控制器在 Ionic (AngularJS) 中被调用两次
【发布时间】：2015-08-14 15:42:10
【问题描述】：

在我的 Angular 项目中，用户接受 EULA 然后自动重定向到他们的仪表板，但是，在这个重定向上，仪表板控制器似乎被调用了两次，仪表板控制器在路由本身上被调用，我检查了是否我不小心在模板中再次调用了它，但我没有。下面是我的路线和控制器。我是直接访问 URL 还是通过 EULA 控制器上的重定向访问 URL 似乎并不重要，我得到相同的结果。

路线

.config(function($httpProvider, $stateProvider, $urlRouterProvider) {

    $httpProvider.interceptors.push('httpRequestInterceptor');

    $urlRouterProvider.otherwise('/');

    $stateProvider

    .state('login', {
        url: '/',
        templateUrl: 'templates/login.html',
        data: {
            requireLogin: false
        }
    })
    .state('eula', {
        url: '/eula',
        templateUrl: 'templates/eula.html',
        data: {
            requireLogin: true
        }
    })
    .state('dashboard', {
        url: '/groups',
        templateUrl: 'templates/dashboard.html',
        data: {
            requireLogin: true
        }
    })
});

控制器：

App.controller('DashboardController', ['$scope', 'RequestService', '$state', '$rootScope', function($scope, RequestService, $state, $rootScope){

alert('test');

}]);

有什么想法吗？

根据评论添加了我的 HTML

index.html

<body ng-app="App">

<ion-nav-bar class="bar-positive nav-title-slide-ios7" align-title="center">
        <ion-nav-back-button class="button-icon ion-arrow-left-c"></ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view class="slide-left-right"></ion-nav-view>
    <ui-view></ui-view>
</body>

dashboard.html

<div class="groups" ng-controller="DashboardController">
    <ion-view title="App">

        <ion-nav-buttons side="right">
            <a ui-sref="groupcreate"><span class="icon ion-ios-plus-outline"></span></a>
        </ion-nav-buttons>

        <ion-content class="padding">
            <div class="row">
                <div class="col-50"  ng-repeat="group in groups">
                    {{ group }} 1
                </div>
            </div>
        </ion-content>
    </ion-view>
</div>

【问题讨论】：

也许您只是不小心在 HTML 源代码中包含了两次 .JS？
谢谢，但我已经检查过了，但似乎并非如此，我也在使用其他控制器，例如 LoginController 但这只被调用一次，我不是 100%但这可能与路由有关吗？
这可能有很多原因。上周发生在我身上，这是因为我使用的是 ionic 并且控制器连接到 dom。它也在路由中被触发。如果您也提供您的 html，这可能是原因。请参阅此帖子以获取可能的解决方案列表 - stackoverflow.com/questions/15535336/…
感谢@Paul Fitzgerald，我已将我的 HTML 包含在问题中。如您所见，我不再在路由中调用 DashboardController，而是在 dashboard.html 文件中。
您能否添加一个 plunkr，以便我们可以看到您的模板以及您的实际路由？

标签： javascript angularjs ionic-framework angularjs-routing angularjs-controller

【解决方案1】：

如果您使用ui-router，则不必使用ng-controller。您在 dashboard.html 中使用过它，另一个由 ui-router 生成 - 这就是它被命中两次的原因。

【讨论】：

正如您在上面的路线示例中看到的，我只在仪表板视图中调用它一次。我把它从路由中去掉试试看，好像不管怎么叫它都跑了两次。
@SeriousJelly - 我的意思是从 dashboard.html 中删除 ng-controller="DashboardController" - 当您访问仪表板路由时，控制器会被调用两次，因为它在 HTML 模板中并且由 ui-router 自动生成。跨度>
好的，试过了，现在什么都没有加载，除非我在路由本身或视图（不是两者）中指定它，否则 ui-router 肯定不知道我想在该模板中使用什么控制器。
@SeriousJelly - 当然，您应该在路由配置中指定 controller 属性 - 我的错。
是的，之前尝试过，我已经从仪表板视图中删除了 ng-controller，并将其添加回路线，但仍然是同样的问题:(

【解决方案2】：

好的，经过长时间的调试和检查，我发现这是与 ionic 中的导航栏有关的问题，基本上，我在同一页面上调用了 <ui-view></ui-view> 和 <ion-nav-view></ion-nav-view>，所以基本上将我的观点加倍，这反过来又调用了控制器两次。

【讨论】：

【解决方案3】：

我知道这个问题也已经得到解答，但我想为完全相同的问题添加我的修复程序。

我的控制器也被调用了两次，但就我而言，我不得不注释掉各个文件中的 ng-controller 设置：

我在主 app.js 中的配置函数

.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('splash', {
            url: "/",
            templateUrl: "app/splash/splash.html"
            // controller: 'SplashCtrl'
        })

因为我已经在标记中调用了它：

<ion-view view-title="TickerTags" ng-controller="SplashCtrl as splash">
    <ion-content class="splash">

我的指令中的控制器键

angular
    .module('tagsPanelDirective', [])
    .controller('TagsPanelCtrl', TagsPanelCtrl)
    .directive('tagsPanel', tagsPanel);

function tagsPanel() {
    var directive = {
        templateUrl: "app/tags/tagsPanel.html",
        restrict: "E",
        replace: true,
        bindToController: true,
        // controller: 'TagsPanelCtrl as tagsPanel',
        link: link,
        scope: false
    };
    return directive;
    function link(scope, element, attrs) {}
}

再次，因为我已经从模板标记中调用它：

<section class="tags-panel" ng-controller="TagsPanelCtrl as tagsPanel">

【讨论】：