Question

我在AngularJS上构建应用程序并且我使用ui-modal，但不是创建用于编辑和创建的separete视图（它们是相同的）我希望在同一视图上运行两个模态的实例。这就是我所做的

我有一个主控制器，它具有创建和编辑功能，它们都打开了自己的模态实例：

(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，而不是使用函数：

$scope.project = {};

然后在模板中引用如下：

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

它用于编辑的唯一原因是因为该函数从projectsService返回相同的对象，而不是每次都创建一个新对象。

一旦你有了工作，你就可以通过干掉你的控制器来开始重构。有几种方法可以解决这个问题，但我会有不同的解决方案来创建和编辑; create将具有null项目ID，edit将具有编辑项目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不存在，控制器或服务可以初始化新项目或返回项目如果存在身份证。

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

AngularJS ui模式无法正常工作

1 个答案: