Question

控制器作为语法问题

我是棱角分明的新手，所以如果我错了，请原谅我。我有一个问题，服务用于某些操作。在这种情况下，将书籍添加到购物车。

我遵循推荐的方式使用控制器作为语法而不是$ scope。但是在kart-list.html中，我无法访问kart详细信息，因为此操作是由BookListCtrl完成的。

app.js

var app = angular.module("app", ["ngRoute"]);

app.config(function($routeProvider) {
  $routeProvider
    .when("/books", {
      templateUrl: "partials/book-list.html",
      controller: "BookListCtrl",
      controllerAs: 'booklist'
    })
    .when("/kart", {
      templateUrl: "partials/kart-list.html",
      controller: "KartListCtrl",
    })
    .otherwise({
      redirectTo: "/books"
    });
});

app.factory("kartService", function() {
  var kart = [];

  return {
    getKart: function() {
      return kart;
    },
    addToKart: function(book) {
      kart.push(book);
    },
    buy: function(book) {
      alert("Thanks for buying: ", book.name);
    }
  };
});

app.factory("bookService", function() {
  var books = ['some data'];

  return {
    getBooks: function() {
      return books;
    },
    addToKart: function(book) {

    }
  }
});

app.controller("KartListCtrl", function(kartService) {
  var self = this;
  self.kart = kartService.getKart();

  self.buy = function(book) {
    kartService.buy(book);
  };
});

app.controller("HeaderCtrl", function() {
  var self = this;
  self.appDetails = {};
  self.appDetails.title = "BooKart";
  self.appDetails.tagline = "We have collection of 1 Million books";
});

app.controller("BookListCtrl", function(bookService, kartService) {
  var self = this;
  self.books = bookService.getBooks();

  self.addToKart = function(book) {
    kartService.addToKart(book);
  };
});

图书-list.html

<div id="bookListWrapper">
  <form role="form">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Search here..." />
    </div>
  </form>
  <ul class="list-unstyled">
    <li class="book" ng-repeat="book in booklist.books" style="background: white url('imgs/{{book.imgUrl}}') no-repeat">
      <div class="book-details clearfix">
        <h3>{{book.name}}</h3>
        <p>{{book.price}}</p>
        <ul class="list-unstyled list-inline">
          <li>Rating: {{book.rating}}</li>
          <li>Binding: {{book.binding}}</li>
          <li>Publisher: {{book.publisher}}</li>
          <li>Released: {{book.releaseDate}}</li>
        </ul>
        <p>{{book.details}}</p>
        <button class="btn btn-info pull-right" ng-click="addToKart(book)">Add to Kart</button>
      </div>
    </li>
  </ul>
</div>

地图-view.html

<div id="bookListWrapper">
  <p>Please click on buy button to buy the book.</p>
  <ul class="list-unstyled">
    <li class="book" ng-repeat="book in kart" style="background: white url('imgs/{{book.imgUrl}}') no-repeat">
      <div class="book-details clearfix">
        <h3>{{book.name}}</h3>
        <p>{{book.price}}</p>
        <ul class="list-unstyled list-inline">
          <li>Rating: {{book.rating}}</li>
          <li>Binding: {{book.binding}}</li>
          <li>Publisher: {{book.publisher}}</li>
          <li>Released: {{book.releaseDate}}</li>
        </ul>
        <p>{{book.details}}</p>
        <button class="btn btn-info pull-right" ng-click="buy(book)">Buy</button>
      </div>
    </li>
  </ul>
</div>

问题是如何使用控制器作为kart-list.html附近ng-repeat的语法来访问卡丁车的详细信息？

Answer 1

您使用controller as功能，但尚未涵盖所有视图参考。

图书-list.html

<button ... ng-click="addToKart(book)">Add to Kart</button>

更改为

<button ... ng-click="booklist.addToKart(book)">Add to Kart</button>

<强>地图-view.html

<li ... ng-repeat="book in kart" ... ... <button ... ng-click="buy(book)">Buy</button>

更改为

<li ... ng-repeat="book in KartListCtrl.kart" ... ... <button ... ng-click="KartListCtrl.buy(book)">Buy</button>

Answer 2

您必须在book-list.html中调用addToKart（）方法时为booklist添加前缀。

使用以下文件解决您的问题：

书list.html

<div id="bookListWrapper">
  <form role="form">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Search here..." />
    </div>
  </form>
  <ul class="list-unstyled">
    <li class="book" ng-repeat="book in booklist.books" style="background: white url('imgs/{{book.imgUrl}}') no-repeat">
      <div class="book-details clearfix">
        <h3>{{book.name}}</h3>
        <p>{{book.price}}</p>
        <ul class="list-unstyled list-inline">
          <li>Rating: {{book.rating}}</li>
          <li>Binding: {{book.binding}}</li>
          <li>Publisher: {{book.publisher}}</li>
          <li>Released: {{book.releaseDate}}</li>
        </ul>
        <p>{{book.details}}</p>
        <button class="btn btn-info pull-right" ng-click="booklist.addToKart(book)">Add to Kart</button>
      </div>
    </li>
  </ul>
</div>

如何在以下方案中使用控制器作为语法

控制器作为语法问题

2 个答案:

书list.html