Angular中的双向数据绑定与来自模态的POST请求 [英] Two way data binding in Angular with POST request from modal

问题描述

大家好，



我有数据绑定问题。我正在使用angulat boostrap模式向Laravel API发送一个帖子请求，我收到了正确的信息。我在数组中推送结果，数组已更新，但DOM不是。



你能指点我正确的方向吗？



这是我在模态中使用的表格：

Hello all,

I have an issue with data binding. I am using the angulat boostrap modal to send a post request to a Laravel API and I am receiving the proper information. I am pushing the result in an array, the array is updated but the DOM isn't.

Can you please point me in the right direction?

This is the form I'm using in the modal:

angular.module('app.dashboard.projects')
        .controller("ProjectsController", function($scope, $modal, $resource, ProjectsFactory){
            $scope.Projects = {};
            $scope.new_project = {};
    
            $scope.createModalNewProject = function(){
                // console.log("bla");
                var modalInstance = $modal.open({
                    templateUrl: 'js/modules/projects/views/new-project.html',
                    controller : ModalController
                });
            };
    
            $scope.createProject = function () {
                ProjectsFactory.create($scope.new_project).$promise.then(function(data){
                    console.log(data.projects);
                    $scope.Projects.push(data.projects);
                    console.log($scope.Projects);
                    console.log(showAll());
                });
            };
    
            $scope.updateList = function(){
                $scope.Projects.push(data.projects);
            };
    
            showAll();
            function showAll(){
                ProjectsFactory.show().$promise.then(function(data){
                    return $scope.Projects = data.projects;
                });
            };
        });

这个是角度控制器：

This is the controller in angular:

angular.module('app.dashboard.projects')
        .controller("ProjectsController", function($scope, $modal, $resource, ProjectsFactory){
            $scope.Projects = {};
            $scope.new_project = {};
    
        $scope.createModalNewProject = function(){
            // console.log("bla");
            var modalInstance = $modal.open({
                templateUrl: 'js/modules/projects/views/new-project.html',
                controller : ModalController
            });
        };
    
            $scope.createProject = function () {
                ProjectsFactory.create($scope.new_project).$promise.then(function(data){
                    $scope.Projects.push(data.projects);
                });
            };
    
            $scope.updateList = function(){
                $scope.Projects.push(data.projects);
            };
    
    
    
            showAll();
            function showAll(){
                ProjectsFactory.show().$promise.then(function(data){
                    return $scope.Projects = data.projects;
                });
            };
        });

这是我正在使用的工厂：

This is the factory that I'm using:

angular.module('app.dashboard.projects')
        .factory('ProjectsFactory', function ($resource) {
            return $resource('api/v1/projects/:projectId', {}, {
                show: { method: 'GET' },
                create: { method: 'POST' },
                update: { method: 'PUT', params: {id: '@id'} },
                delete: { method: 'DELETE', params: {id: '@id'} }
            })
        });

参考模态模块：

http://angular-ui.github.io/bootstrap/ [ ^ ]

推荐答案

范围，

modal，

resource，ProjectsFactory）{

resource, ProjectsFactory){

这篇关于Angular中的双向数据绑定与来自模态的POST请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！