Angular中的双向数据绑定与来自模态的POST请求

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.

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

Can you please point me in the right direction?

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

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

这是我在模态中使用的形式:

<div class="container" ng-controller="ProjectsController">
<div class="row title">
    <h2>Project Info <small>Please fill in all the fields</small></h2>
</div>
<div class="row">
    <form ng-submit="createProject()">
        <div class="form-group">
            <!-- <label for="project-name" class="col-sm-2 control-label">Project name:</label> -->
            <div class="col-sm-12">
                <input type="text" name="name" id="project-name" class="form-control" placeholder="Project name" ng-model="new_project.name" required>
            </div>
        </div>
        <div class="form-group">
            <!-- <label for="project-name" class="col-sm-2 control-label">Project name:</label> -->
            <div class="col-sm-12">
                <textarea name="description" id="project-description" class="form-control" rows="3" placeholder="Project description"  ng-model="new_project.description" required></textarea>
                <!-- <input type="text" name="description" id="project-description" class="form-control" placeholder="Project description"  ng-model="new_project.description" required> -->
            </div>
        </div>
        <div class="form-group">
            <div class="pull-left">
                <button type="submit" class="btn btn-primary" ng-click="ok()">Submit project</button>
            </div>
            <div class="pull-left">
                <button type="submit" class="btn btn-primary" ng-click="cancel()">Cancel</button>
            </div>
        </div>
    </form>

This is where I want to update the DOM and where I trigger the dialog

这是我想要更新DOM以及触发对话框的位置

<div class="create-proj" ng-controller="ProjectsController">
        <button id="saveProfileButton" class="primaryButton" ng-click="createModalNewProject()">Create Project</button>
    </div>
<ul class="projects" ng-controller="ProjectsController">
                <li ng-repeat="project in Projects">
                    <ul>
                        <li>
                            <h4><span class="title" ng-bind="project.name"></span>
                                <span class="dropdown left-navigation-project-settings-icons dropdown-toggle" data-toggle="dropdown"></span>
                            </h4>
                        </li>
                    </ul>
                </li>
            </ul>

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'} }
        })
    });

Reference to the modal module: http://angular-ui.github.io/bootstrap/

参考模态模块:http://angular-ui.github.io/bootstrap/

3 个解决方案

#1

The reason why data are not updated is because modal is isolated scope and you don't pass the data to the modal scope. Example how you can solve it:

数据未更新的原因是因为模态是隔离范围而您没有将数据传递给模态范围。示例如何解决它:

angular.module('app.dashboard.projects')
    .controller("ProjectsController", function($scope, $modal, $resource, ProjectsFactory) {
        $scope.createModalNewProject = function() {
            var modalInstance = $modal.open({
                templateUrl: 'js/modules/projects/views/new-project.html',
                controller: function($scope, $modalInstance, items) {
                    $scope.items = items;

                    console.log($scope.items);
                    $scope.ok = function() {
                        $modalInstance.close();
                    };

                    $scope.cancel = function() {
                        $modalInstance.dismiss('cancel');
                    };
                },
                resolve: {
                    items: function() {
                        return ProjectsFactory.show().$promise.then(function(data) {
                            return data;
                        });
                    }
                }
            });
        };
    });

#2

After some digging I changed the controller and now it looks like this. I forgot to broadcast the response from my ajax call so I can show it outside the modal scope. Thank you for all your help.

经过一番挖掘,我改变了控制器,现在它看起来像这样。我忘了播放我的ajax调用的响应,所以我可以在模态范围之外显示它。谢谢你的帮助。

var CreateController = function($scope, $modalInstance, items,ProjectsFactory, $rootScope ){

    $scope.new_project = {};
    $scope.ok = function() {
        $modalInstance.close();
    };

    $scope.cancel = function() {
        $modalInstance.dismiss('cancel');
    };

    $scope.createProject = function (items) {
        ProjectsFactory.create($scope.new_project).$promise.then(function(data){
                if(data.error){
                    $rootScope.$broadcast('project.update', data.result);
                }
                $rootScope.$broadcast('project.update', data.result);
        });
    };
};

app.controller("ProjectsController",['$scope','$modal','$resource','ProjectsFactory','$timeout','$rootScope', function(
        $scope,
        $modal, 
        $resource,
        ProjectsFactory,
        $timeout,
        $rootScope
){

    $scope.Projects = [];

    $scope.$on('project.update', function(event, data) {
        $scope.Projects.unshift(data);
    });

    function showAll(){
        ProjectsFactory.show().$promise.then(function(data){
            $scope.Projects = data.result;
        });
    }

    showAll();

    // $scope.addProject = function(){
    //     $scope.Projects = $rootScope.Projects;
    //     $timeout(function(){$scope.$apply()},500);
    // }

    $scope.createModalNewProject = function(){
        var modalInstance = $modal.open({
            restrict: 'E',
            templateUrl: '/js/modules/projects/views/new-project.html',
            controller: CreateController,
            resolve: {
                items: function() {
                    return ProjectsFactory.show().$promise.then(function(data) {
                        return data.result;
                    });
                }
            }

        });
    };


    $scope.safeApply = function(fn) {
        var phase = this.$root.$$phase;
        if(phase == '$apply' || phase == '$digest') {
            if(fn && (typeof(fn) === 'function')) {
                fn();
            }
        } else {
            this.$apply(fn);
        }
    };


}]).controller('CreateController',['$scope','$modalInstance','items','ProjectsFactory','$rootScope',CreateController]);

#3

I think the flow is wrong, In your controller do something like this

我认为流程是错误的,在你的控制器中做这样的事情

angular.module('app.dashboard.projects') .controller("ProjectsController", function($scope, $modal, $resource, ProjectsFactory) { $scope.Projects = ProjectsFactory.get(); }

angular.module('app.dashboard.projects')。invtroller(“ProjectsController”,function($ scope,$ modal,$ resource,ProjectsFactory){$ scope.Projects = ProjectsFactory.get();}