2017-03-26 3 views
1

내 프로젝트에 resolve \ promise를 추가하려고 했으므로 페이지를 요청할 때 페이지에서 json을받은 후에 만로드됩니다. 섬기는 사람. 이 내 JS 코드 :

'use strict'; 

angular.module('myApp.show', ['ngRoute']) 

.config(['$routeProvider', function ($routeProvider) { 
$routeProvider.when('/show', { 
    templateUrl: 'views/show.html', 
    controller: 'showCtrl', 
    resolve: { 
     booksList: function ($http) { 
      return ($http.get('data/books.json') 
       .then(function (data) { 
        return data; 
       })); 
     } 
    } 
    }); 
}]) 

.controller('showCtrl', ['booksList', '$scope', function (booksList, $scope) { 
    $scope.books = booksList; 
    $scope.removeRow = function (productIndex) { 
     if (window.confirm("are you sure?")) { 
      $scope.books.splice(productIndex, 1); 
    } 
    } 
}]) 

그러나 이것은 내가 무엇을 얻을 : 오류 : [$ 주입기 : unpr] 알 수없는 제공 : booksListProvider < - booksList < - showCtrl

각도에 내가 좀 새로운, 하지만 몇 가지 자습서를 따라했으며 동영상에서 작동하는 동안 오류가 계속 발생했습니다.

HTML :

<div class="table-responsive"> 
    <div ng-app="myApp.show" ng-controller="showCtrl"> <!-- ctrl --> 
     <table st-table="rowCollection" class="table table-striped"> 
      <thead> 
       <tr> 
        <th st-sort="author">Author</th> 
        <th st-sort="date">Date</th> 
        <th st-sort="title">Title</th> 
        <th></th> 
       </tr> 
      </thead> 
      <tbody> 
      <tr ng-repeat="(bookIndex, book) in books"> 
       <td class="col-md-3">{{ book.author }}</td> 
       <td class="col-md-3">{{ book.date | date }}</td> 
       <td class="col-md-4">{{ book.title | beutifyTitle }}</td> 
       <td class="col-md-1"><ng-include src="'views/partials/editBook.html'"></ng-include></td> 
       <td class="col-md-1"><button class="btn btn-warning" ng-click="removeRow()">Delete</button></td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div 
+0

ng-controller를 사용하여 컨트롤러를로드하는 것이 라우터에서 작동하지 않을 것으로 예상됩니다. 해결 방법은 ngRoute를 통해 주입해야합니다. UI-Router 만 경험할 수 있습니다. – Daniel

답변

0

당신은 당신의 템플릿에서 ng-controller="showCtrl"을 제거해야합니다. 그 이유는 라우터를 통해 showCtrl을 벌써 벌리고 있기 때문입니다. 그러나 그 경우에 ng-controller을 인라인 템플릿을 통해 다시 작성하면 booksList 제공자를 확인할 수 없습니다.

+0

와우! 감사!! 나는이 문제에 너무 많은 시간을 보냈다. JS 코드가 아닌 HTML 코드를 깨닫지 못했다. 어쨌든, 당신의 도움은 대단히 감사한다! – user3328918

+0

@ user3328918 감사합니다, 당신은 내 대답을 받아 들일 수 :) –