Question

我有一个用户需要填写并提交的表单。单击“提交”按钮后，将触发将数据推送到阵列的函数，但我没有运气将其推入阵列。需要将数据推入的数组位于另一个控制器中。

调试代码我发现我收到了这个错误。

Cannot read property 'comments' of undefined
    at n.$scope.submitComment (app.js:167)

的JavaScript / HTML

.controller('DishDetailController', ['$scope', function($scope) {
    var dish = {
        name: 'Uthapizza',
        image: 'images/uthapizza.png',
        category: 'mains',
        label: 'Hot',
        price: '4.99',
        description: 'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
        comments: [{
                rating: 5,
                comment: "Imagine all the eatables, living in conFusion!",
                author: "John Lemon",
                date: "2012-10-16T17:57:28.556094Z"
            }, {
                rating: 4,
                comment: "Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
                author: "Paul McVites",
                date: "2014-09-05T17:57:28.556094Z"
            }, {
                rating: 3,
                comment: "Eat it, just eat it!",
                author: "Michael Jaikishan",
                date: "2015-02-13T17:57:28.556094Z"
            }, {
                rating: 4,
                comment: "Ultimate, Reaching for the stars!",
                author: "Ringo Starry",
                date: "2013-12-02T17:57:28.556094Z"
            }, {
                rating: 2,
                comment: "It's your birthday, we're gonna party!",
                author: "25 Cent",
                date: "2011-12-02T17:57:28.556094Z"
            }

        ]
    };

    $scope.dish = dish;
}]);

.controller('DishCommentController', ['$scope', function($scope) {
    $scope.feedback = {
        author: "",
        rating: "",
        comment: "",
        feedbackDate: ""
    };
    $scope.submitComment = function() {
        $scope.feedback.feedbackDate = new Date().toISOString();
        $scope.dish.comments.push($scope.feedback);
    }
}]);

    <div class="col-xs-9 col-xs-offset-1" ng-controller="DishCommentController">
        <div class="col-xs-12">
            <form class="form-horizontal" role="form" name="commentForm" ng-submit="submitComment()" novalidate>
                <div class="form-group form-inline" ng-class="{ 'has-error' : commentForm.author.$error.required && !commentForm.author.$pristine }">
                    <label for="author">Your Name</label>
                    <input type="text" class="form-control" id="author" name="author" placeholder="Enter Your Name" ng-model="feedback.author" required> <span ng-show="commentForm.author.$error.required && !commentForm.author.$pristine" class="help-block">Your name is required</span>
                </div>
                <div class="form-group" ng-init="feedback.rating=5">
                    <label for="rating">Number Of Stars</label>
                    <input type="radio" name="rating" id="rating" value="1" ng-model="feedback.rating"> 1 </label>
                    <input type="radio" name="rating" id="rating" value="2" ng-model="feedback.rating"> 2 </label>
                    <input type="radio" name="rating" id="rating" value="3" ng-model="feedback.rating"> 3 </label>
                    <input type="radio" name="rating" id="rating" value="4" ng-model="feedback.rating"> 4 </label>
                    <input type="radio" name="rating" id="rating" value="5" ng-model="feedback.rating"> 5 </label>
                </div>
                <div class="form-group form-inline" ng-class="{ 'has-error' : commentForm.comment.$error.required && !commentForm.comment.$pristine}">
                    <label for="comment">Your Comment</label>
                    <textarea id="comment" name="comment" ng-model="feedback.comment" class="form-control" rows="3" placeholder="Your Comment" required></textarea>
                    <span ng-show="commentForm.comment.$error.required && !commentForm.comment.$pristine" class="help-block">Your comment is required</span>
                </div>
                <button type="submit" ng-disabled="commentForm.$invalid" class="btn btn-primary">Submit Comment</button>
            </form>
        </div>
    </div>

Answer 1

使用服务在控制器之间共享数据并使用角度对象引用以更新不同控制器中的数据。

.service('sharingService', function ($injector) {
            this.sharedObject= [];

        });

在DishDetailController中

  $scope.dish = dish;

使用后像

angular.extend(sharingService.sharedObject, $scope.dish);

在DishCommentController中

sharingService.sharedObject.comments.push($scope.feedback);

Answer 2

你有两个不同的控制器，每个控制器都有自己的$ scope，如果你想在控制器之间传递数据你可以使用$ rootscope，这个是angularjs的主要范围。

https://docs.angularjs.org/api/ng/service/ $ rootScope

每个应用程序都有一个根作用域。所有其他范围都是根范围的后代范围。范围提供了分离模型和视图，通过观察模型的机制变化。他们还提供事件发布/广播和订阅设施。请参阅有关范围的开发者指南。

将数据推送到AngularJS中的数组

2 个答案: