AngularJS用戶界面模式無法正常工作

Question

我在AngularJS上構建應用程序，我正在使用UI模式，但不是爲編輯和創建創建單獨視圖（這是相同的）我希望兩個實例運行在同一模式視圖。這是我做過什麼

我有這對於創建和編輯功能中的一個主控制器，兩人打開自己的模式的實例：

(function() 
{ 
    'use strict'; 

    angular.module('app.projects') 

    .controller('ProjectsController', ProjectsController); 

    ProjectsController.$inject = ['$scope', '$modal']; 

    function ProjectsController($scope, $modal) 
    { 

     $scope.edit = function(projectId) 
      { 
      var modalInstance = $modal.open(
      { 
       templateUrl: 'modules/projects/view/modal/project.html', 
       controller: 'EditProjectModalInstController', 
       size: 'lg', 
       resolve: { 
       projectId: function(){ 
        return projectId; 
       } 
       } 
      }); 
      }; 

     $scope.create = function() 
      { 
      var modalInstance = $modal.open(
      { 
       templateUrl: 'modules/projects/view/modal/project.html', 
       controller: 'CreateProjectModalInstController', 
       size: 'lg', 
      }); 
      }; 
    }; 
})(); 

這裏有那些模式的情況下，控制器： EditProjectModalInstanceController

(function() 
{ 
    'use strict'; 

    angular.module('app.projects') 

    .controller('EditProjectModalInstController', EditProjectModalInstController); 

    EditProjectModalInstController.$inject = ['ProjectsService', '$scope', '$modalInstance', 'projectId']; 

    function EditProjectModalInstController(projectsService, $scope, $modalInstance, projectId) 
    { 
     $scope.project = function(){return projectsService.project;}; 

     $scope.statuses = [ 
      {name: 'Active', value: 0}, 
      {name: 'Finished', value: 1} 
     ]; 

     $scope.cancel = function() {}; 

     $scope.save = function(){}; 
    }; 


})(); 

，這裏是CreateProjectModalInstanceController.js

(function() 
{ 
    'use strict'; 

    angular.module('app.projects') 

    .controller('CreateProjectModalInstController', CreateProjectModalInstController); 

    CreateProjectModalInstController.$inject = ['ProjectsService', '$scope', '$modalInstance']; 

    function CreateProjectModalInstController(projectsService, $scope, $modalInstance) 
    { 
     $scope.project = function(){return {};}; 

     $scope.statuses = [ 
      {name: 'Active', value: 0}, 
      {name: 'Finished', value: 1} 
     ]; 

     $scope.cancel = function(){}; 

     $scope.save = function(){}; 
    }; 
})(); 

因此，每個實例控制器具有相同的功能，只是他們應該做不同的事情取決於行動（編輯或創建）。

這裏是實際的模板： project.html

<div class="modal-body"> 
    <form class="form-horizontal"> 
     <div class="form-group"> 
      <label for="inputName" class="control-label col-xs-2">Name</label> 
      <div class="col-xs-10"> 
       <input type="text" class="form-control" id="inputName" placeholder="Name" ng-model="project().name"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label for="inputName" class="control-label col-xs-2">Status</label> 
      <div class="col-xs-10"> 
       <select class="form-control" ng-model="project().status"> 
        <option ng-repeat="status in statuses" value="{{status.value}}">{{status.name}}</option> 
       </select> 
      </div> 
     </div> 
    </form> 
</div> 
<div class="modal-footer"> 
    <button ng-click="save()"> Save </button> 
    <button ng-click="cancel()">Cancel</button> 
</div> 

最後的問題，在這裏我的問題是，編輯功能工作正常，但在創建模式打開時，我可以不編輯字段。我擔心我在這裏做錯了什麼，從設計主管的角度來看，如果有更多經驗的人能指出正確的做法，我會非常感激。

Answer 1

您無法編輯創建表單的問題是因爲您的函數在每次調用時都會返回一個新對象。這意味着幾乎所有的操作都會覆蓋保存在該對象中的任何內容。爲了解決這個問題剛剛分配空對象$scope.project而不是使用一個功能：在模板中像這樣

$scope.project = {}; 

然後參考：

<input type="text" class="form-control" id="inputName" placeholder="Name" ng-model="project.name"> 

它的作品進行編輯的唯一原因是因爲功能從projectsService返回相同的對象，而不是每次都創建一個新對象。

一旦你有了這個工作，你就可以通過DRYing你的控制器開始重構。有幾種方法可以解決這個問題，但我只是有不同的解決方案來創建和編輯;創建將有一個null項目ID和編輯將具有編輯項目ID。

創建：

$scope.create = function() { 
    var modalInstance = $modal.open({ 
    templateUrl: 'modules/projects/view/modal/project.html', 
    controller: 'ProjectFormModalInstController', 
    size: 'lg', 
    resolve: { 
     projectId: null 
    } 
    }); 
}; 

編輯：

$scope.edit = function() { 
    var modalInstance = $modal.open({ 
    templateUrl: 'modules/projects/view/modal/project.html', 
    controller: 'ProjectFormModalInstController', 
    size: 'lg', 
    resolve: { 
     projectId: projectId 
    } 
    }); 
}; 

這樣，您就可以使用相同的控制器（我把它命名爲ProjectFormModalInstController，但你可以選擇自己的通用名稱）和控制器或服務可以在ID不存在的情況下初始化新的項目，或者在ID存在的情況下返回項目。

function ProjectFormModalInstController(projectsService, $scope, $modalInstance, projectId) { 

    if (projectId === null) { 
    $scope.project = {}; 
    } else { 
    $scope.project = projectsService.project; 
    } 

    // ...some controller code 

    $scope.save = function(){ 
    if (project.id === null) { 
     // create project 
    } else { 
     // update project 
    } 
    }; 
};