Question

html文件templates\events.html中有以下代码。

<div class="events-2colmn-l backgnd-cover" ui-sref="menu.music">
    MUSIC
</div>

在route.js

  .state('menu.music', {
    url: '/music',
    views: {
      'side-menu21': {
        templateUrl: 'templates/music.html',
        controller: 'musicCtrl'
      }
    }
  })

在控制器中有

.controller('musicCtrl', function ($scope, EventService) { // called twice when clicked
    var allEvents = EventService.query({ category: "Music" });
    allEvents.$promise.then(function (response) { 
        $scope.events = response;  
    });
})

触摸<div ...>MUSIC</div>时，控制器中的代码总是被调用两次。如何确保点击时只调用一次？

Answer 1

这是因为您的控制器被调用了两次......

一旦你打电话
第二次调用templates / music.html是因为你必须在music.html中使用ng-controller指令...请检查

Answer 2

您应该通过ng-controller或app.js中的状态将控制器与html相关联。

所以当你有这样的状态时

.state('menu.music', {
 url: '/music',
 views: {
  'side-menu21': {
    templateUrl: 'templates/music.html',
    controller: 'musicCtrl'
   }
  }
})

你不需要music.html中的ng-controller。这是导致控制器被调用两次的原因。尝试删除ng-controller并验证

为什么控制器中的代码被调用两次？

2 个答案: