具有角度的bootstrap-ui模态

时间:2015-10-30 13:19:45

标签: angularjs angular-ui-bootstrap bootstrap-modal

我遇到以下问题:当我尝试实例化模态

angular.module('previewApp')
  .controller('DienstleisterCtrl', function (dienstleisterRegObjService, staticDataService, $uibModal) {
    var vm = this;
    vm.dienstleisterTypen = staticDataService.getDienstleisterTypen();
    vm.modRegObj = function (dienstleistertyp) {
      dienstleisterRegObjService.vorselektiertesProdukt.typ = vm.dienstleisterTypen[dienstleistertyp];
      var modalInstance = $uibModal.open({
        templateUrl: 'scripts/angular/modals/templates/regform.html',
        controller: 'RegFormCtrl as vm'
      });
    };
  });

它会抛出模态控制器

angular.module('previewApp')
  .controller('RegFormCtrl', function (**$uibModalInstance**, dienstleisterRegObjService, staticDataService, fieldValidator) {    
});

错误:

  

[$ injector:unpr]未知提供者:$ uibModalInstanceProvider< -   $ uibModalInstance< - RegFormCtrl

这是模式: 它有两种形式,一种嵌套在另一种形式中。

<!-- Modal -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true" style="padding-right: 0px;">
  <div class="modal-content">
    <div class="close-modal">
      <div class="lr">
        <div class="rl">
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-lg-offset-2">
          <div class="modal-body">
            <div class="form-horizontal" ng-form="regForm">
              <fieldset>
                <legend class="text-center">
                  <div class="panel formular-head">
                    <h3 class="formular-title">Registrieren</h3>
                    <p class="text-muted formular-description"></p>
                  </div>
                </legend>
                <div class="form-group">
                  <label class="col-md-4 control-label" for="organisation">Organisation</label>
                  <div class="col-md-6">
                    <input id="organisation" name="organisation" type="text" placeholder="z.B. Muster Catering GmbH" class="form-control input-md" ng-model="vm.regObj.organisation" ng-readonly="vm.orgReadOnly" ng-change="vm.checkValue('org')" ng-required="!vm.orgReadOnly">
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-md-4 control-label" for="vorname">Vorname</label>
                  <div class="col-md-6">
                    <input id="vorname" name="vorname" type="text" placeholder="" class="form-control input-md" ng-model="vm.regObj.vorname" ng-readonly="vm.nameReadOnly" ng-change="vm.checkValue('name')" ng-required="!vm.nameReadOnly">
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-md-4 control-label" for="nachname">Nachname</label>
                  <div class="col-md-6">
                    <input id="nachname" name="nachname" type="text" placeholder="" class="form-control input-md" ng-model="vm.regObj.nachname" ng-readonly="vm.nameReadOnly" ng-change="vm.checkValue('name')" ng-required="!vm.nameReadOnly">
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-md-4 control-label" for="email">Email</label>
                  <div class="col-md-6">
                    <input id="email" name="email" type="text" placeholder="max@muster.ch" class="form-control input-md" ng-model="vm.regObj.mail" ng-required="true" ng-pattern="vm.getMailChecker();">
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-md-4 control-label" for="natio">Nationalität</label>
                  <div class="col-md-6">
                    <select id="natio" name="nationalitaet" class="form-control" ng-model="vm.regObj.nationalitaet">
                      <option ng-value="vmnat" ng-repeat="vmnat in vm.nationalitaeten">{{vmnat}}</option>
                    </select>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-md-4 control-label" for="sprache">Sprache</label>
                  <div class="col-md-6">
                    <select id="sprache" name="sprache" class="form-control" ng-model="vm.regObj.sprache">
                      <option ng-value="vmsprache" ng-repeat="vmsprache in vm.sprachen">{{vmsprache}}</option>
                    </select>
                  </div>
                </div>
                <div class="form-group produkt-katalog" ng-show="!vm.regObj.produkte.length == 0">
                  <label class="col-md-4 control-label produkt-label"></label>
                  <div class="col-md-6">
                    <div class="" ng-repeat="vmprod in vm.regObj.produkte track by $index">
                      <produkt-item produkt="vmprod"></produkt-item>
                    </div>
                  </div>
                </div>
                <div ng-form="produktForm">
                  <div class="formular-together panel shadowed">
                    <div class="form-group">
                      <label class="col-md-4 control-label" for="dienstleistertyp">Dienstleistung</label>
                      <div class="col-md-6">
                        <select id="dienstleistertyp" name="dienstleistertyp" class="form-control" ng-model="vm.vorselektiertesProdukt.typ" ng-required="vm.regObj.produkte.length == 0">
                          <option ng-value="vmtyp" ng-repeat="vmtyp in vm.typen">{{vmtyp}}</option>
                        </select>
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-md-4 control-label" for="produkt">Produkt</label>
                      <div class="col-md-6">
                        <input id="produkt" name="produkt" type="text" placeholder="z.B. Lautsprecher, Dekoration, Helfer, Stilrichtung" class="form-control input-md" ng-model="vm.vorselektiertesProdukt.produkt" ng-required="vm.regObj.produkte.length == 0 || vm.vorselektiertesProdukt.typ !== ''">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-md-4"></label>
                      <div class="col-md-6">
                        <button type="button" class="btn btn-default pull-right" name="submit" ng-click="vm.addProduct()" ng-disabled="produktForm.$invalid || vorselektiertesProdukt.produkt == ''">Hinzufügen</button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-md-4 control-label"></label>
                  <div class="col-md-6">
                    <div class="pull-right">
                      <button id="abbrechen" name="abbrechen" class="btn btn-default">Abbrechen</button>
                      <button id="registrieren" name="registrieren" class="btn btn-default" ng-disabled="regForm.$invalid || regObj.produkte.length == 0" ng-click="vm.registrieren()">Registrieren</button>
                    </div>
                  </div>
                </div>
              </fieldset>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Modal Ende -->

在app.js中声明了ui-bootstrap,也在index.html中。

angular
  .module('previewApp', [
    'ngAnimate',
    'ngSanitize',
    'ngResource',
    'ngTouch',
    'ngMessages',
    'ui.bootstrap',
    'ngToast'
  ]);

<script src="/bower_components/jquery/dist/jquery.js"></script>
    <script src="/bower_components/angular/angular.js"></script>
    <script src="/bower_components/angular-animate/angular-animate.js"></script>
    <script src="/bower_components/angular-resource/angular-resource.js"></script>
    <script src="/bower_components/angular-messages/angular-messages.js"></script>
    <script src="/bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="/bower_components/angular-touch/angular-touch.js"></script>
    <script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
    <script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="/bower_components/ngToast/dist/ngToast.js"></script>

这个问题让我很头疼,因为我知道这只是一个小错误,但在最后几个小时里,我几乎尝试了一切,没有任何改变。

非常感谢帮助。我会在答案中张贴一名傻瓜......

1 个答案:

答案 0 :(得分:0)

好的......我不知道它为什么或如何运作但确实如此。

我做了以下事情:

  • 我将&#34;控制器更改为&#34;从我的index.html创建modal plus删除命名控制器并用$ scope替换它们。

  • 我在dienstleister.js中添加了modal创建模式,modalinstance.result.then函数

现在不再有任何错误了。如果有人知道为什么现在有效,我会很感激解释。

感谢您的时间。