Question

这是我的App.js文件，请仔细查看我做错了什么。我已经提供了相关文件index.html和founditemtemplate.html below.its在控制台中返回对象数组但是没有以格式显示我在founditemtemplate.index

中提供的

(function () {
    'use strict'

    angular.module('NarrowItDownApp', [])
        .controller('NarrowItDownController', NarrowItDownController )
        .service('MenuSearchService', MenuSearchService)
        .directive('foundItems', FoundItemsDirective)
    ;

    function FoundItemsDirective() {
        var ddo = {
            templateUrl: 'foundItemTemplate.html',
            restrict: 'E',
            scope: {
                items: '<',
                onRemove: '&'
            }
        };
        return ddo;
    }

    NarrowItDownController.$inject = ['MenuSearchService']
    function NarrowItDownController(MenuSearchService) {
        var ctrlNarrow = this;
        ctrlNarrow.found = [];

        ctrlNarrow.searchItems = function () {
            ctrlNarrow.found = MenuSearchService.getMatchedMenuItems(ctrlNarrow.searchTerm);
        }

        ctrlNarrow.remove = function(index){
            ctrlNarrow.found.splice(index, 1);
        }
    }


    MenuSearchService.$inject = ['$http']
    function MenuSearchService($http) {

        var service = this;

        service.getMatchedMenuItems = function(searchTerm) {

            if (!service.data) service.getData();
            if (searchTerm === "") return [];

            var items = service.data.menu_items;
            var found = [];

            for (var i = 0; i < items.length; i++) {
                var desc = items[i].description;
                if (desc.indexOf(searchTerm) !== -1) {
                    found.push(items[i]);
                }
            }

            console.dir(found);
            return found;
        };

        service.getData = function () {

            $http({
                method: "GET",
                url: ("https://davids-restaurant.herokuapp.com/menu_items.json")
            }).then( function (result) {
                console.log(result.data);
                service.data = result.data;
            }, function (result) {
                console.log(result.data);
                service.getData();
            });
        }
        service.getData();
    }
})();

这是我的主要Index.html文件

<!doctype html>
<html lang="en" ng-app="NarrowItDownApp">
  <head>
    <title>Narrow Down Your Menu Choice</title>
      <script src="js/angular.min.js"></script>
      <script src="js/app.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles/bootstrap.min.css">
    <link rel="stylesheet" href="styles/styles.css">
  </head>
<body  ng-controller="NarrowItDownController as syntax">
   <div class="container">
    <h1>Narrow Down Your Chinese Menu Choice</h1>

    <div class="form-group">
      <input type="text" placeholder="search term" class="form-control" ng-model="syntax.searchTerm">
    </div>
    <div class="form-group narrow-button">
      <button class="btn btn-primary" ng-click="syntax.searchItems()">Narrow It Down For Me!</button>
    </div>

    <items-loader-indicator></items-loader-indicator>

    <!-- found-items should be implemented as a component -->
       <div>
            <found-items items="syntax.found" on-remove="syntax.remove(index)"></found-items>
       </div>
  </div>

</body>
</html>

这里可能是Founditemtemplate.html

<ul>
    <div>
        <li ng-repeat="item in items">
            <div>
                <b>Name:</b>({item.name})
            </div>
            <div>
                <b>Description:</b> {{item.description}}
            </div>
            <button ng-click="onRemove({index: $index});">Don't want this one!</button>
        </li>
    </div>
</ul>
<div ng-if="items.length == 0">Nothing Found</div>

Answer 1

我把你的代码放在一个Plunker中 - HERE，它运行正常。

你有没有机会搞砸了foundItemTemplate.html文件名的情况？

它应该就像它在这里

templateUrl: 'foundItemTemplate.html',

这是我唯一能想到的，它确实复制了你描述的行为。

数组在控制台中返回但未在angularjs

1 个答案: