无法隐藏表单本身更改showForm值，因为它是未定义的

Question

我正在按照汤到比特:与Angular.js视频成型的指南制作一个小的“阅读列表”应用程序

我不喜欢他们把“取消”按钮放在顶部，只是为了练习，决定把它移到表单中。我想出了如何使它工作(单击'Cancel‘隐藏了使用表达式ng-click="reviewFormCtrl.showForm =false“的表单)。它起作用了，直到CodeSchool的人做了一个独立的范围

​

directive('reviewForm', function(){
	return {
		restrict: "E",
		templateUrl: "partials/review-form.html",
		replace: true,
		controller: function() {
			this.showForm = false;
			this.book = {genres:{}};

			this.addReview = function(form) {
				books.push(this.book);
				this.book = {genres:{}};

				form.$setPristine();
			}
		},
		controllerAs: 'reviewFormCtrl',
		scope: {
			books: '=',
			genres: '='
		}
	}
})

​

从那时起，我的“取消”按钮停止工作。控制台说ReviewFormCtrl和ReviewFormCtrl.showForm是未定义的。我不知道如何在我所处的范围内改变这个值。

下面是我的app.html和app.js

(function() {
'use strict';

// Declare app level module which depends on views, and components
angular.module('readingList', []).
controller('ReadingListController', function(){
	this.books = books;
	this.genres = genres;
}).
directive('bookGenres', function(){
	return {
		restrict: "E",
		templateUrl: "partials/book-genres.html",
		scope: {
			genres: "="
		}
	}
}).
directive('bookCover', function(){
	return {
		restrict: "E",
		templateUrl: "partials/book-cover.html",
		replace: true
	}
}).
directive('reviewForm', function(){
	return {
		restrict: "E",
		templateUrl: "partials/review-form.html",
		replace: true,
		controller: function() {
			this.showForm = false;
			this.book = {genres:{}};

			this.addReview = function(form) {
				books.push(this.book);
				this.book = {genres:{}};

				form.$setPristine();
			}
		},
		controllerAs: 'reviewFormCtrl',
		scope: {
			books: '=',
			genres: '='
		}
	}
})
;

var genres = [ 'fable', 'fantasy', 'fiction', 'folklore', 'horror', 'humor', 'legend', 'metafiction', 'mystery', 'mythology', 'non-fiction', 'poetry' ];

  var books = [
    {
      title: 'A Game of Thrones: A Song of Ice and Fire',
      author: 'George R.R. Martin',
      isbn: '0553593714',
      review: 'The most inventive and entertaining fantasy saga of our time—warrants one hell of an introduction. I loved this book!',
      rating: 4,
      genres: { 'non-fiction': true, fantasy: true }
    },{
      title: 'HTML for Babies',
      author: 'John C Vanden-Heuvel Sr',
      isbn: '0615487661',
      review: "It's never too early to be standards compliant! I taught my little one mark-up in under one hour!",
      rating: 5,
      genres: { fiction: true }
    },{
      title: 'A is for Array',
      author: 'Brandon J Hansen',
      isbn: '1489522212',
      review: 'A is for Array is the ABC book for future programmers. Filled with fun illustrations and simple real-world examples, my children loved seeing my world intertwined with theirs!',
      rating: 4,
      genres: { fiction: true }
    },{
      title: 'The Dragon Reborn',
      author: 'Robert Jordan',
      isbn: '0812513711',
      review: 'The Wheel weaves as the Wheel wills, and we are only the thread of the Pattern. Moiraine',
      rating: 4,
      genres: { 'non-fiction': true, fantasy: true }
    }
  ];

})();

<h1>Angular Reading List of Awesome</h1>

<div class="row" ng-controller="ReadingListController as readingListCtrl">

  <button class="btn btn-default" ng-click="reviewFormCtrl.showForm = !reviewFormCtrl.showForm" ng-hide="reviewFormCtrl.showForm">{{reviewFormCtrl.showForm ? "Cancel" : "Create a Review"}}</button>
  <hr />
  <review-form books="readingListCtrl.books" genres="readingListCtrl.genres" ng-show="reviewFormCtrl.showForm"></review-form>
  <hr ng-show="reviewFormCtrl.showForm"/>
 
  <ul class="list-unstyled col-sm-8">
    <li class="book row" ng-repeat="book in readingListCtrl.books">
      
        <!-- Book cover goes here -->
        <book-cover></book-cover>


      <div class="col-sm-9">
        <h3><a href="#">{{book.title}}</a></h3>

        <cite class="text-muted">Written by {{book.author}}</cite>

        <p>{{book.review}}</p>

<!-- Put genre here -->
      <book-genres genres="book.genres"></book-genres>

      </div>


      
    </li>
  </ul>
</div>

​

下面是一个评论-form.html

​

<form name="reviewForm" class="form-horizontal" ng-submit="reviewFormCtrl.addReview(reviewForm)">

  <section class="row well live-preview" ng-show="reviewFormCtrl.book.isbn">
    <aside class="col-sm-3">
      <a href="http://www.amazon.com/gp/product/{{reviewFormCtrl.book.isbn}}">
        <img src="http://images.amazon.com/images/P/{{reviewFormCtrl.book.isbn}}.01.ZTZZZZZZ.jpg" alt="Cover of Book" class="full">
      </a>
      <p>{{reviewFormCtrl.book.rating}}/5</p>
    </aside>

    <div class="col-sm-9">
      <h3>
        <a href="http://www.amazon.com/gp/product/{{reviewFormCtrl.book.isbn}}">
          {{reviewFormCtrl.book.title}}
        </a>
      </h3>
      <cite class="text-muted">Written by {{reviewFormCtrl.book.author}}</cite>

      <p>{{reviewFormCtrl.book.review}}</p>

      <book-genres genres="reviewFormCtrl.book.genres"></book-genres>
    </div>
  </section>

  <div class="input-container">
    <fieldset class="form-group">
    <label for="title" class="col-sm-2 control-label">Title:</label>
    <span class="col-sm-9">
      <input type="text" class="form-control" id="title"
      placeholder="Book Title" ng-model="reviewFormCtrl.book.title">
    </span>
    </fieldset>

    <fieldset class="form-group">
    <label for="isbn" class="control-label col-sm-2">ISBN:</label>
    <span class="col-sm-9">
      <input type="text" id="isbn" class="form-control"
      maxLength="10" placeholder="ISBN-10" ng-model="reviewFormCtrl.book.isbn">
    </span>
    </fieldset>

    <fieldset class="form-group">
    <label class="control-label col-sm-2" for="author">Author</label>
    <span class="col-sm-9">
      <input type="text" id="author" class="form-control" 
      placeholder="Name of the Author" ng-model="reviewFormCtrl.book.author"></span>
    </fieldset>

    <fieldset class="form-group">
      <label class="control-label col-sm-2" for="review">Review</label>
      <span class="col-sm-9">
        <textarea id="review" class="form-control" cols="30" rows="3" 
        placeholder="Book Review" ng-model="reviewFormCtrl.book.review"></textarea>
      </span>
    </fieldset>

    <fieldset class="form-group">
      <label for="rating" class="control-label col-sm-2">Rating:</label>
      <span class="col-sm-9">
        <select class="form-control" id="rating" value="5" ng-model="reviewFormCtrl.book.rating">
          <option>5</option>
          <option>4</option>
          <option>3</option>
          <option>2</option>
          <option>1</option>
        </select>
      </span>
    </fieldset>

    <fieldset class="form-group">
      <label class="control-label col-sm-2" >Genre:</label>
      <div class="genre">
        <label for="{{genre}}" class="genre-label form-control" ng-repeat="genre in genres">
          <input type="checkbox" name="genre" id="{{genre}}" ng-model="reviewFormCtrl.book.genres[genre]"/>
          {{genre}}
        </label>
      </div>
    </fieldset>

    <fieldset class="form-group">
      <span class="col-sm-9 col-sm-offset-2 button-from-hell">
        <button class="btn btn-primary">Save Review</button>
        <button class="btn btn-default" ng-click="reviewFormCtrl.showForm = false" style="margin-right: 15px;">Cancel</button>
      </span>
    </fieldset>
  </div>

</form>

​

Answer 1

您正在多次引用审查表单指令之外的reviewFormCtrl。两人均在此：

<button class="btn btn-default" ng-click="reviewFormCtrl.showForm = !reviewFormCtrl.showForm" ng-hide="reviewFormCtrl.showForm">{{reviewFormCtrl.showForm ? "Cancel" : "Create a Review"}}</button>

在这里：

<hr ng-show="reviewFormCtrl.showForm"/>

你不能在那些地方接触到它。如果希望控制指令的可见性，那么也许可以在readingListCtrl控制器上创建readingListCtrl属性，将其双绑定到指令中，如下所示：

<review-form books="readingListCtrl.books" genres="readingListCtrl.genres" visibility="readingListCtrl.showForm"></review-form>

然后将其添加到指令的scope属性中：

scope: {
  books: '=',
  genres: '=',
  visibility: '='
}

最后，将其直接应用于模板中的form元素：

<form ng-show="reviewFormCtrl.visibility" name="reviewForm" class="form-horizontal" ng-submit="reviewFormCtrl.addReview(reviewForm)">

当然，现在更新Cancel按钮以更改visibility。