Angular Material 对话框数据输入/推送后更新 ng-repeat

Question

我正在尝试向 ng-repeat 数组添加一个新对象。该数组是使用通过 $http 请求获取的数据创建的。我需要能够将我在对话框中输入的数据传递给一个函数，然后将该数据作为一个对象推送到数组上并更新视图。我可以很好地在控制台中记录输入的值，即使我记录了数组，它也会显示更新的值，但不会更新视图。此外，如果我添加一个带有不在对话框中的按钮的对象，它将更新数组。

更新

在使用 Chrome 的 Angular ng-Inspector 查看范围概述后，我可以看到新对象被添加到控制器范围内的数组中，控制器是发生 ng-repeat 的元素的父级。发生 ng-repeat 的元素有自己的范围，我可以看到该数组没有在那里更新。我需要这个数组是更新的数组，因为那是 ng-repeat 所在的位置，也是正在查看的内容。我仍然有点困惑，为什么会有两个相同的数组，一个改变而另一个没有。当我将对象推送到“$scope.plots”时，我需要定位 ng-repeat 父元素的范围。我还没有找到一个很好的方法来做到这一点。

这是我的对话

function showAdd(ev) {
        $mdDialog
            .show({
                controller: DialogController,
                templateUrl: '/templates/addDialog.html', //contains inputs that are modeled to values as seen in the push function below. A button calls addPlant()
                targetEvent: ev,
                clickOutsideToClose: true,
                openFrom: 'left'
            }).then(function(added) {
                newPlant(added);
        })
    }

这是我的对话控制器

function DialogController($scope, $mdDialog, $http) {
$scope.addPlant = function (added) {
    for (var i = 0; i < added.quantity; i++) {
        $http.post('/addPlant', added).then(function () { //this is just posting the data to a database, not related to the issue.
                $mdDialog.hide(added);
            }
        });
    }
};

以及推送功能

var newPlant = function(added) {
        $scope.plots.push({
            'plot': added.plot,
            'varieties': [{
                'count': added.quantity,
                'variety': added.variety
            }],
            'count': added.quantity
        });

Answer 1

我最终不得不创建一个服务并从 rootScope 广播添加的对象。我为监听广播的 ng-repeat 元素创建了一个单独的控制器。

当对话框关闭时，它会解析将表单数据传递给服务的承诺。

$mdDialog
        .show({
            controller: 'DialogCtrl as dc',
            templateUrl: '/templates/addDialog.html',
            targetEvent: ev,
            clickOutsideToClose: true,
            openFrom: 'left'
        }).then(function(added) {
            addPlant.prepForBroadcast(added) //calling service in promise, passing 'added' input values
    })

我创建了一个服务来广播对象

var myApp= angular.module('myApp');

myApp.factory('addPlant', ['$rootScope', function($rootScope) {
    var box= {}; //I like to call the designated factory object a 'box'
    box.newPlant = {};

    box.prepForBroadcast = function(added) {
        box.newPlant = added;
            this.broadcastItem();
    };

    box.broadcastItem = function() {
        $rootScope.$broadcast('broadcast');
    };
    return box; //ship out the box with the newPlant
}]);

还有一个单独的控制器用于 ng-repeat 元素，监听广播

myApp.controller('ListCtrl', ['$scope','addPlant', function($scope, addPlant) {

$scope.$on('broadcast', function() { //listening for broadcast
        $scope.plots.push({
            'plot': addPlant.newPlant.plot,
            'count': addPlant.newPlant.quantity,
            'varieties': [{
                'variety': addPlant.newPlant.variety,
                'count': addPlant.newPlant.quantity
            }]
        });
    })
}]);