我正在制作一本小小的阅读清单＆＃34;申请遵循Soup to Bits: Shaping up with Angular.js video
的指南我不喜欢他们放置的方式＆＃34;取消＆＃34;顶部的按钮，只是为了练习决定将其移动到窗体内。我想出了如何使其工作（点击＆＃39;取消＆＃39;使用表达式ng-click =＆＃34; reviewFormCtrl.showForm = false＆＃34;隐藏表单）。它起作用，直到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: '='
}
}
})
从那时起，我的＆＃39;取消＆＃39;按钮停止工作。控制台表示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>
这是一个review-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>
答案 0 :(得分：0)
您多次在review-form指令之外引用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"/>
您无法在这些地方访问它。如果您希望控制指令的可见性，那么可能在showForm控制器上创建readingListCtrl属性，将其双重绑定到指令中，如下所示：
<review-form books="readingListCtrl.books" genres="readingListCtrl.genres" visibility="readingListCtrl.showForm"></review-form>
然后将其添加到指令的scope属性中：
scope: {
books: '=',
genres: '=',
visibility: '='
}
最后将它直接应用到模板中的表单元素：
<form ng-show="reviewFormCtrl.visibility" name="reviewForm" class="form-horizontal" ng-submit="reviewFormCtrl.addReview(reviewForm)">
当然，现在更新“取消”按钮即可更改visibility。