2
我想顯然解決問題與一些有時角經驗的新手的財產。即使有幾個帖子中，我沒有發現我的小例子問題。場景：
- 顯示評論的網頁&的評價。
- 該網站提供了可能進入一個新的評論/評級
- 的javascript應推新進入的現有意見陣列
- 那裏很容易可以是一個控制器的整個故事，但它是意向瞭解控制器的「繼承」的模式，所以有意向的兩個小控制器
問題：
- 功能（在控制器2）其推動新條目ŧ鄰 現有註釋（控制器1）的結果是類型錯誤的陣列，因爲在這個範圍的陣列是未定義的。
'use strict';
angular.module('confusionApp', [])
.controller('DataController', ['$scope', function($scope) {
$scope.comments = [{rating: 1, comment:"bla", author: "pma", date: new Date().toISOString()} , {rating:2, comment:"harakiri", author:"hku", date: new Date().toISOString()}];
}])
.controller('CommentController', ['$scope', function($scope) {
$scope.comment = {rating:5, comment:"", author:"", date: new Date().toISOString() };
$scope.submitComment = function() {
console.log($scope.comment);
$scope.comment.date = new Date().toISOString();
// this scope here does not know about the comments array --> BUG
$scope.comments.push($scope.comment);
$scope.commentForm.$setPristine();
$scope.comment = {rating:5, comment:"", author:"", date: new Date().toISOString()};
console.log($scope.comment);
};
}])
;的HTML頁面
<!DOCTYPE html>
<html lang="en" ng-app="confusionApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head
content must come *after* these tags -->
<title>Ristorante Con Fusion: Menu</title>
<!-- Bootstrap -->
<!-- build:css styles/main.css -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="styles/bootstrap-social.css" rel="stylesheet">
<link href="styles/mystyles.css" rel="stylesheet">
<!-- endbuild -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row row-content">
<div class="col-xs-12">
<div class="row row-content" ng-controller="DataController">
<div class="col-xs-9 col-xs-offset-1">
<blockquote ng-repeat="comment in comments | orderBy: sortOption">
<p>{{comment.rating}} Stars</p>
<p>{{comment.comment}}</p>
<footer>{{comment.author}}, {{comment.date | date}}</footer>
</blockquote>
</div>
</div>
<div class="col-xs-9 col-xs-offset-1" ng-controller="CommentController">
<form class="form-horizontal" name="commentForm" ng-submit="submitComment()" novalidate>
<!-- name property -->
<div class="form-group" ng-class="{ 'has-error' : commentForm.author.$error.required || commentForm.author.$pristine }">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="author" name="author" placeholder="Enter your name" ng-model="comment.author" required>
<span ng-show="commentForm.author.$error.required || commentForm.author.$pristine" class="help-block">Your name is required</span>
</div>
</div>
<!-- the rating -->
<div class="form-group">
<label for="rating" class="col-sm-2 control-label">Rating</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="ratingGroup" id="inlineRadio1" ng-model="comment.rating" value="1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="ratingGroup" id="inlineRadio1" ng-model="comment.rating" value="2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="ratingGroup" id="inlineRadio1" ng-model="comment.rating" value="3"> 3
</label>
<label class="radio-inline">
<input type="radio" name="ratingGroup" id="inlineRadio1" ng-model="comment.rating" value="4"> 4
</label>
<label class="radio-inline">
<input type="radio" name="ratingGroup" id="inlineRadio1" ng-model="comment.rating" value="5"> 5
</label>
</div>
</div>
<!-- the comments -->
<div class="form-group" ng-class="{ 'has-error' : commentForm.comment.$error.required || commentForm.comment.$pristine }">
<label for="feedback" class="col-sm-2 control-label">Your Comment</label>
<div class="col-sm-10">
<textarea class="form-control" id="comment" name="comment" rows="12" ng-model="comment.comment" placeholder="Please provide some comments" required></textarea>
<span ng-show="commentForm.comment.$error.required || commentForm.comment.$pristine" class="help-block">Your comment is required !</span>
</div>
</div>
<!-- the button -->
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" ng-disabled="commentForm.$invalid">Send Comments</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- build:js scripts/main.js -->
<script src="../bower_components/angular/angular.min.js"></script>
<script src="scripts/app.js"></script>
<!-- endbuild -->
</body>
</html>謝謝你，任何暗示將不勝感激。
一種方法是使用$廣播服務（此廣播到你的第二個控制器，第一控制器播放與您的評論一個事件你的rootcope）。在你的第一個控制器註冊$ on事件來檢查播出的事件。 –