Javascript 将UI引导模式与Angular Fullstack和ES6结合使用

我想将与&ES6一起使用，但它不起作用。 我想选择一个项目，点击“编辑”，并在一个大的模式编辑该项目。但是我没有打开模态

在控制台中，我收到以下错误消息：

"Error: $modal is not defined"

我的项目控制器如下所示：

'use strict';

(function() {

  class ProjectCtrl {

    constructor(Project, $modal, $log) {
      this.project = Project;
      this.projects = [];
      this.getAllProjects(Project);
      this.$modal = $modal;
      this.log = $log;
    }

    // Open a modal window to Update a single Project
    modalUpdate(size, selectedProject) {
      var modalInstance = $modal.open({
        templateUrl: 'app/project/project-edit.modal.html',
        controller: function ($scope, modalInstance, aProject) {
          $scope.project = aProject;
        },
        size: size,
        resolve: {
          aProject: function () {
            return selectedProject;
          }
        }
      });

      modalInstance.result.then(function (selectedItem) {
        this.selected = selectedItem;
      }, function () {
        $log.info('Modal dismissed at: ' + new Date());
      });
    };
  }

angular.module('projectApp')
    .controller('ProjectCtrl', ProjectCtrl);
})();

'use strict';

angular.module('projectApp', [
  'projectApp.constants',
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ui.router',
  'ui.bootstrap' 
])
  .config(function($urlRouterProvider, $locationProvider) {
    $urlRouterProvider
      .otherwise('/');

    $locationProvider.html5Mode(true);
  });

<button type="button" class="btn btn-default btn-xs pull-right" ng-click="ProjectCtrl.modalUpdate('lg', project)"><span aria-hidden="false"></span> Edit</button>

app.js看起来像这样：

'use strict';

(function() {

  class ProjectCtrl {

    constructor(Project, $modal, $log) {
      this.project = Project;
      this.projects = [];
      this.getAllProjects(Project);
      this.$modal = $modal;
      this.log = $log;
    }

    // Open a modal window to Update a single Project
    modalUpdate(size, selectedProject) {
      var modalInstance = $modal.open({
        templateUrl: 'app/project/project-edit.modal.html',
        controller: function ($scope, modalInstance, aProject) {
          $scope.project = aProject;
        },
        size: size,
        resolve: {
          aProject: function () {
            return selectedProject;
          }
        }
      });

      modalInstance.result.then(function (selectedItem) {
        this.selected = selectedItem;
      }, function () {
        $log.info('Modal dismissed at: ' + new Date());
      });
    };
  }

angular.module('projectApp')
    .controller('ProjectCtrl', ProjectCtrl);
})();

'use strict';

angular.module('projectApp', [
  'projectApp.constants',
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ui.router',
  'ui.bootstrap' 
])
  .config(function($urlRouterProvider, $locationProvider) {
    $urlRouterProvider
      .otherwise('/');

    $locationProvider.html5Mode(true);
  });

<button type="button" class="btn btn-default btn-xs pull-right" ng-click="ProjectCtrl.modalUpdate('lg', project)"><span aria-hidden="false"></span> Edit</button>

打开模式的按钮：

'use strict';

(function() {

  class ProjectCtrl {

    constructor(Project, $modal, $log) {
      this.project = Project;
      this.projects = [];
      this.getAllProjects(Project);
      this.$modal = $modal;
      this.log = $log;
    }

    // Open a modal window to Update a single Project
    modalUpdate(size, selectedProject) {
      var modalInstance = $modal.open({
        templateUrl: 'app/project/project-edit.modal.html',
        controller: function ($scope, modalInstance, aProject) {
          $scope.project = aProject;
        },
        size: size,
        resolve: {
          aProject: function () {
            return selectedProject;
          }
        }
      });

      modalInstance.result.then(function (selectedItem) {
        this.selected = selectedItem;
      }, function () {
        $log.info('Modal dismissed at: ' + new Date());
      });
    };
  }

angular.module('projectApp')
    .controller('ProjectCtrl', ProjectCtrl);
})();

'use strict';

angular.module('projectApp', [
  'projectApp.constants',
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ui.router',
  'ui.bootstrap' 
])
  .config(function($urlRouterProvider, $locationProvider) {
    $urlRouterProvider
      .otherwise('/');

    $locationProvider.html5Mode(true);
  });

<button type="button" class="btn btn-default btn-xs pull-right" ng-click="ProjectCtrl.modalUpdate('lg', project)"><span aria-hidden="false"></span> Edit</button>

编辑

---

我的猜测是，在ProjectCtrl中，我必须以某种方式$inject'Project'、$modal'和$log'，但我不知道如何以及在哪里使用。

您使用的是哪个版本的ui引导

根据所使用的版本，语法会有所不同

假设您使用的是v0.13.4或更高版本的，并且没有ES6，那么解决方案如下：

注: 如果您使用的是比v0.13.4更新的版本，则将

$modal

替换为

$uibModal

，将

$modalInstance

替换为

$uibModalInstance

，这样也应该可以使用

---

首先，您需要在命令行中写入：

yo angular-fullstack:controller MyModalName

然后在myModalName.controller.js中放入以下内容：

.controller('MyModalNameCtrl', function ($scope,$modal) {

$scope.openModal = function () {
  var modalInstance = $modal.open({
    animation: true,
    templateUrl: 'testmodal',
    controller: 'ModalInstanceCtrl',

  });

  modalInstance.result.then(function () {}, function () {
    console.log('Modal dismissed at: ' + new Date());
  });
};

}))

然后仍然在myModalName.controller.js中放置以下内容：

//change theNameOfYourApp to your corresponding app name !
angular.module('theNameOfYourApp').controller('ModalInstanceCtrl', function ($scope, $modalInstance) {

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

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

最后一步，在.html页面中要显示模式的地方，放置：

<!--Modal Template-->
<div ng-controller="MyModalNameCtrl">
  <script type="text/ng-template" id="testmodal">
    <div class="modal-header">
      <h3 class="modal-title">Hello :</h3>
    </div>
    <div class="modal-body">
      <p>hey, this is the body </p>
    </div>
    <div class="modal-footer">
      <button class="btn btn-default" type="button" ng-click="ok()">OK</button>

      <button class="btn btn-default" type="button" ng-click="cancel()">Cancel()</button>
    </div>
  </script>
</div>

你好：
嘿，这是尸体

好啊
取消

我用另一种方法解决了模式问题，因为UI引导在ES6中似乎不起作用。至少现在不是

我为Angular Fullstack使用了模态服务

下面是一个带有删除模式的简单示例：

'use strict';

(function() {

class AdminController {
  constructor(User, Modal) {
    // Use the User $resource to fetch all users
    this.users = User.query();
    this.modal = Modal;
  }

  delete(user) {
    var deleteConfirmationModal = this.modal.confirm.delete((user) => {
        user.$remove();
        this.users.splice(this.users.indexOf(user), 1);
    });

    deleteConfirmationModal(user.name, user);
  }
}

angular.module('sampleApp.admin')
  .controller('AdminController', AdminController);

})();

这是模态的样子：

---

我昨天将ui引导更新为最新版本。在我已经存在的“ProjectCtrl”中，没有其他方法可以解决这个问题吗？我正在使用这个控制器进行CRUD操作，我想使用Modal更新项目的值。但是我在ES6中编写了ProjectCtrl，不知道如何在ES6中实现该模式。我对ES6没有很好的了解，因此在这种情况下我不能真正帮助您：/Maybe，收回我上面的示例，并将我编写的内容翻译成ES6，我想这应该不会太难。