在 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
            }]
        });
    })
}]);

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

Update ng-repeat after Angular Material dialog data entry / push

javascript

angularjs

angularjs-material