Question

我有一个模块和控制器，其创建如下：

var API_ENGINE_URL = 'localhost/angular/';
var mainApp = angular.module('mainApp', ['ngRoute', 'ngResource']);


mainApp.controller('productController', ['$scope', 'ProductFactory', 'ProductListFactory','$routeParams', function ($scope, ProductFactory,routeParams, ProductListFactory) {
    var productList = new ProductListFactory();// THROWS ERROR HERE
    var promise = productList.$get({id: $routeParams.category_id}).$promise;
    promise.then(function (productList) {
        $scope.productList = productList;
    });
}]);

并且像这样创建模型，正确加载文件

 mainApp.factory('ProductListFactory', ['$resource',function ($resource) {
    return $resource(API_ENGINE_URL + 'category/:id/items', {}, {
        get: {method: 'GET', params: {category_id: '@category_id', id: '@id'},isArray:true,url:API_ENGINE_URL+'product?store_id=:storeId'},
        save: {method: 'GET', isArray: true}

    });
}]);

我在控制器中收到错误，如下所示。可能是什么错误。坚持了很久

Answer 1

在工厂函数中，返回值是Angular缓存和注入的值。没有必要自己实例化。

试试这个：

mainApp.controller('productController', ['$scope', 'ProductFactory', 'ProductListFactory','$routeParams', function ($scope, ProductFactory,routeParams, ProductListFactory) {
    var promise = ProductListFactory.$get({id: $routeParams.category_id}).$promise;
    promise.then(function (productList) {
        $scope.productList = productList;
    });
}]);

Answer 2

问题在于订购应该是：

<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="">
<!--<![endif]-->

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="apple-touch-icon" href="apple-touch-icon.png">

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
  <style>
    body {
      padding-top: 50px;
      padding-bottom: 20px;
    }
  </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
</head>

<body>
  <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->


  <!--MAIN CONTENT GOES HERE -->

  <style>
    /* main menu */
    .mainNav {
      margin: 0;
      padding: 0;
      min-height: 100px;
      text-align: left;
      white-space: normal;
      width: 368px;
      display: block;
      cursor: default;
    }
    .mainNav-item {
      display: inline-block;
      vertical-align: top;
    }
    .mainNav-item a {
      text-decoration: none;
      color: black;
    }
    .mainNav-item a:hover {
      text-decoration: none;
      color: black;
    }
    .mainNav-item-tile {
      display: block;
      margin: 6px 5px 6px 5px;
      padding: 0;
      text-align: center;
      line-height: normal;
      position: relative;
      text-decoration: none;
      width: 110px;
      height: 110px;
      background: transparent;
      border-width: 0;
      font-size: 14px;
      outline-color: #e7e7e7;
      background-color: #e7e7e7;
    }
    .mainNav-item-tile:hover {
      outline-color: #ccc;
      background-color: #ccc;
    }
    .mainNav-item-tile-img {
      display: block;
      padding: 15px;
      margin-left: auto;
      margin-right: auto;
    }
    .popover {
      max-width: 600px;
      width: auto;
    }
    /* The container <div> - needed to position the dropdown content */
    .dropdown {
      position: relative;
      display: inline-block;
    }
    /* Dropdown Content (Hidden by Default) */
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1000;
      left: 80px;
      top: 20px;
    }
    /* Links inside the dropdown */
    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
    /* Change color of dropdown links on hover */
    .dropdown-content a:hover {
      background-color: #f1f1f1
    }
  </style>



  <div style="float: left; cursor: pointer; margin: 13px 15px 0 0">
    <img data-toggle="popover" data-placement="bottom" onmouseover="this.src='http://placehold.it/32x32'" onmousedown="this.src='http://placehold.it/32x32'" onmouseout="this.src='http://placehold.it/32x32'" src="http://placehold.it/32x32" />

    <div id="popover_content_wrapper" style="display: none;">
      <div>
        <ul class="mainNav">
          <li class="mainNav-item dropdown" data-toggle="popover" data-placement="bottom">
            <a ID="navItem" runat="server" class="mainNav-item-tile">
              <img width="64" height="64" src="http://placehold.it/64x64" class="mainNav-item-tile-img" />
              <span>MainMenuItem1</span>
            </a>

            <div id='content1' class='dropdown-content'>
              <a href='#'>SubMenuItem1</a>
              <a href='#'>SubMenuItem2</a>
            </div>
          </li>
          <li class="mainNav-item dropdown" data-toggle="popover" data-placement="bottom">
            <a ID="navItem" runat="server" class="mainNav-item-tile">
              <img width="64" height="64" src="http://placehold.it/64x64" class="mainNav-item-tile-img" />
              <span>MainMenuItem2</span>
            </a>

            <div id='content2' class='dropdown-content'>
              <a href='#'>SubMenuItem1</a>
              <a href='#'>SubMenuItem2</a>
            </div>
          </li>
          <li class="mainNav-item dropdown" data-toggle="popover" data-placement="bottom">
            <a ID="navItem" runat="server" class="mainNav-item-tile">
              <img width="64" height="64" src="http://placehold.it/64x64" class="mainNav-item-tile-img" />
              <span>MainMenuItem3</span>
            </a>

            <div id='content3' class='dropdown-content'>
              <a href='#'>SubMenuItem1</a>
              <a href='#'>SubMenuItem2</a>
            </div>
          </li>
          <li class="mainNav-item dropdown" data-toggle="popover" data-placement="bottom">
            <a ID="navItem" runat="server" class="mainNav-item-tile">
              <img width="64" height="64" src="http://placehold.it/64x64" class="mainNav-item-tile-img" />
              <span>MainMenuItem4</span>
            </a>

            <div id='content4' class='dropdown-content'>
              <a href='#'>SubMenuItem1</a>
              <a href='#'>SubMenuItem2</a>
            </div>
          </li>
          <li class="mainNav-item dropdown" data-toggle="popover" data-placement="bottom">
            <a ID="navItem" runat="server" class="mainNav-item-tile">
              <img width="64" height="64" src="http://placehold.it/64x64" class="mainNav-item-tile-img" />
              <span>MainMenuItem5</span>
            </a>

            <div id='content5' class='dropdown-content'>
              <a href='#'>SubMenuItem1</a>
              <a href='#'>SubMenuItem2</a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>





  <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


  <script type="text/javascript">
    $(document).ready(function() {
                $('[data-toggle="popover"]').popover({
                    html: true,
                    content: function () {
                        return $('#popover_content_wrapper').html();
                    }
                });

                $('html').on('click', function (e) {
                    $('[data-toggle="popover"]').each(function () {
                        //the 'is' for buttons that trigger popups
                        //the 'has' for icons within a button that triggers a popup
                        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
                            $(this).popover('hide');
                        }
                    });
                });

                $("html").on("click", ".dropdown", function (e) {
                    var $this = $(this).children(".dropdown-content");

                    if ($this.find("a").length > 0) {
                        e.preventDefault();

                        $(".dropdown-content:visible").not($this).slideToggle(200); //Close submenu already opened
                        $this.slideToggle(200); //Open the new submenu
                    }
                });
    });
  </script>


</body>

</html>

创建工厂对象时出错

2 个答案: