雙向數據從模態

Question

您好所有的角與POST請求結合，

我有數據綁定的問題。我正在使用angulat boostrap模式向Laravel API發送發佈請求，並且我正在接收適當的信息。我在數組中推送結果，數組被更新，但DOM不是。

你能指點我正確的方向嗎？

這是我使用的模態形式：

<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> 

這就是我要更新的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> 

這是控制器在angu LAR：

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

這是工廠的，我使用：

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/

Answer 1

之所以數據不更新是因爲模態是獨立的範圍，您不會將數據傳遞到模態範圍。例如如何可以解決這個問題：

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

Answer 2

我認爲流動是錯誤的，在你的控制器做這樣的事情

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

Answer 3

經過一番挖掘，我改變了控制器和現在它看起來像這樣。我忘記播放來自我的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]);