Question

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

更新

使用Chrome的Angular ng-Inspector查看范围概述后，我可以看到新对象正在控制器范围内添加到数组中，该控制器是ng-repeat元素的父元素发生了。 ng-repeat发生的元素有自己的范围，我可以看到数组没有在那里更新。我需要这个数组是更新的，因为这是ng-repeat所在的位置，也就是正在查看的内容。我仍然有点困惑的是，如果有两个相同的阵列，其中一个发生了变化，而另一个发生了变化。当我将对象推到＆＃39; $ scope.plots＆＃39;我需要定位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

1 个答案: