Question

我正在尝试在我的网络应用中设置angular modal service，但每当我点击我的按钮时，它都不会出现。我做错了什么？

构建器视图

<div ng-controller="BuilderController as vm">
    <button type="button" class="btn btn-success" ng-click="vm.showExportModal()">Export</button>
</div>

构建器控制器

angular.module('myWebApp')
  .controller('BuilderController', function ($scope, BuilderService) {    
    var vm = this;

    vm.showExportModal = function() {
      BuilderService.showExportModal();
    }; 
  });

构建器服务

angular.module('myWebApp')
  .service('BuilderService', function (ModalService) {

    var builderService = {
      showExportModal: showExportModal
    };
    return builderService;

    function showExportModal() {
      ModalService.showModal({
        template: "<div>Fry lives in {{futurama.city}}</div>",
        controller: function() {
          this.city = "New New York";
        },
        controllerAs : "futurama"
      })
    };

  });

Answer 1

它似乎在这个片段中工作正常，我建议检查你是否已将其作为依赖项注入你的应用程序。

请注意，您需要使用正确的模态模板来显示模态而不是您为指令提供的模板。

angular.module('myWebApp', ['angularModalService']);

angular.module('myWebApp')
  .controller('BuilderController', function($scope, BuilderService) {
    var vm = this;

    vm.showExportModal = function() {
      BuilderService.showExportModal();
    };
  });

angular.module('myWebApp')
  .service('BuilderService', function(ModalService) {

    var builderService = {
      showExportModal: showExportModal
    };
    return builderService;

    function showExportModal() {
      ModalService.showModal({
        template: "<div>Fry lives in {{futurama.city}}</div>",
        controller: function() {
          this.city = "New New York";
        },
        controllerAs: "futurama"
      })
    };

  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<script src="http://dwmkerr.github.io/angular-modal-service/angular-
modal-service.js"></script>

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

<div ng-app="myWebApp">
  <div ng-controller="BuilderController as vm">
    <button type="button" class="btn btn-success" ng-click="vm.showExportModal()">Export</button>
  </div>
</div>

角度模态服务不显示

1 个答案: