Question

我使用ngResource从服务器调用了数据。但是，我已经发现由于某种原因，我的控制器被调用了两次。
这是我的代码;

App.js文件

// declare a module
var blogApp = angular.module('blogApp', ['ngResource']);

HomeController.js文件;

blogApp.controller("HomeController", function ($scope, $resource) {
    var HotNews = $resource('/api/article/hotnews?culture=en-US');
    $scope.news = HotNews.query();
    alert("hello"); //here i see hello alert box two times
});

我的观点;

  <ul id="news" data-ng-controller="HomeController">
      <li data-ng-repeat="headline in news">
          {{headline.description}}
          <a href="#" title="Read More">» more</a>
      </li>
  </ul>

已更新：问题出现在主要布局的fancybox.js文件中;

<html data-ng-app="blogApp">

源文件是;

    <!-- JS -->
<script src="/Content/scripts/lib/angular.min.js"></script>
<script src="/Content/scripts/lib/angular-resource.min.js"></script>
<script src="/Content/scripts/app/app.js"></script>
<script src="/Content/scripts/app/controllers/HomeController.js"></script>
@Scripts.Render("~/bundles/jquery")
<script src="/content/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

当我评论出fancybox时，一切正常，但是当我把它添加回来时，我会得到两次警告框;

Answer 1

一切看起来都不错。问题可能在其他地方。我基于上面创建了一个plunker并执行了一次控制器。您可能需要修改它，添加其他代码（如果有）并自行测试：http://embed.plnkr.co/ttvlTJBhTEd9sQUdkQjX/preview

Answer 2

这个问题的主要问题在于我的项目中脚本的排列方式。所以，我逐个评论每个脚本，然后我得到了问题。问题是，我正在使用名为pageslide的jquery库，在我有一个按钮的情况下，当用户点击该按钮时，页面向左/右滑动;
所以，我只是将所有angular相关文件移到所有脚本的末尾，现在，我没有看到alert()框两次。
这是适合我的安排;

 @Scripts.Render("~/bundles/jquery")
    <script src="/Content/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <script src="/content/scripts/lib/general.js"></script>
    <script src="/content/scripts/lib/function.js"></script>
    <script src="/content/scripts/lib/styleswitch.js"></script>
    <!-- elRTE -->
    <script src="/content/scripts/lib/elrte/elrte.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/Content/scripts/app/dataservice.js"></script>
    <script src="/Content/scripts/app/statemanager.js"></script>

    // this was causing the problem

    <script>
        $("#allpage-login-top").pageSlide({ width: "350px", direction: "left" });
        $("#allpage-signup-top").pageSlide({ width: "350px", direction: "right" });
        $("#allpage-search-top").pageSlide({ width: "350px", direction: "left", modal: true });
        $("#homepage-login-button").pageSlide({ width: "350px", direction: "left" });
        $("#homepage-signup-button").pageSlide({ width: "350px", direction: "right" });
    </script>
        <!-- JS -->
    <script src="/Content/scripts/lib/angular.min.js"></script>
    <script src="/Content/scripts/lib/angular-resource.min.js"></script>
    <script src="/Content/scripts/app/app.js"></script>
    <script src="/Content/scripts/app/controllers/HomeController.js"></script>

    @RenderSection("scripts", required: false)
    @MiniProfiler.RenderIncludes()

Angularjs控制器被称为两次？

2 个答案: