Angular Controller被调用两次

Question

I've tried using both the DOM and the stateProvider methods.

Feed.html

    <div class="container-fluid">
        <div class="panel panel-card" ng-repeat="post in posts" class="col-lg-12 fadeInUp animated" style="-webkit-animation-delay: {{$index * 0.1}}s; animation-delay: {{$index * 0.1}}s;">
            <div class="panel-body bg-primary">{{post.user_id}} from {{post.squad_id}}</div>
            <div class="clearfix"></div>
        </div>
    </div>

feed.controller.js

(function() {
    'use strict';

    angular
        .module('app')
        .controller('FeedController', FeedController);

    FeedController.$inject = ['$scope'];
    function FeedController($scope) {
        console.log($scope);
    }

})();

routes.config.js

(function() {
    'use strict';

    angular
        .module('app')
        .config(routesConfig);

    routesConfig.$inject = ['$locationProvider', '$stateProvider', '$urlRouterProvider', 'RouteProvider'];
    function routesConfig($locationProvider, $stateProvider, $urlRouterProvider, Route) {

      // use the HTML5 History API
      $locationProvider.html5Mode(false);

      // Default route
      //$urlRouterProvider.otherwise('/feed');

      // Application Routes States
      $stateProvider
        .state('app', {
          url: '',
          abstract: true,
          templateUrl: Route.base('app.html'),
          resolve: {
            _assets: Route.require('icons', 'toaster', 'animate')
          }
        })
        .state('app.feed', {
          url: '/feed/',
          templateUrl: Route.base('feed.html'),
          controller: "FeedController",
          resolve: {}
        })
    }

})();

The other way was to insert ng-controller="FeedController" into the top div in feed.html and comment out controller: "FeedController", from routes.config.js

app.html

<!-- top navbar-->
<header ng-include="'templates/top-navbar.html'" ng-class="app.theme.topbar"></header>
<!-- Sidebar-->
<aside ng-include="'templates/sidebar.html'" ng-class="app.theme.sidebar"></aside>
<!-- Main-->
<section>
   <!-- Content-->
   <div ui-view="" autoscroll="false" ng-class="app.views.animation" class="app"></div>
</section>
<!-- Page footer-->
<footer ng-include="'templates/footer.html'"></footer>

Both of these methods console.log($scope) twice with different $id's. This happens on page reload and state change.

Anyone have any idea's?

Answer 1

I'm not where I can test this, but you might try just commenting out the .controller('FeedController', FeedController); line in feed.controller.js .

I think hitting the route will fire off the controller, so you don't need to fire it off there.

Answer 2

There is no reason to this occur. But, i suspect url sub state. Try removing the last bar.