2

我已经使用ngResource. 但是，我发现由于某种原因，我的控制器被调用了两次。
这是我的代码；

应用程序.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时，一切正常，但是当我将其添加回来时，我得到了两次警告框；

4

2 回答 2

1

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

于 2013-06-01T17:35:44.670 回答
0

对我来说，这个问题的重点是脚本在我的项目中的排列方式。所以，我一个一个地注释掉每个脚本，然后我就遇到了问题。问题是，我使用的是 jquery 库pageslide，在我有一个按钮的情况下，当用户单击该按钮时，页面向左/向右滑动；
所以，我只是将我所有的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()
于 2013-06-01T18:29:19.837 回答