Angular 1.6.5 mit Webpack laden Vorlage für uiModal

Question

Ich versuche ein modales Fenster zu öffnen, der Hintergrund wird angezeigt, aber es gibt kein sehr Modell-Fenster.

Mein Code:

let template = require('../modal/newModel.html'); 

let modal = $uibModal.open({ 
    template, 
    controller: 'NewModelCtrl as NewModel', 
    windowClass: 'modal-rule-create' 
}); 

modal.result.then((model) => { 
    self.list.push(model); 
}, (event) => { 
    console.log('Close modal window:', event); 
}); 

webpack.config.js

{ 
    test: /\.html$/, 
    use: 'html-loader' 
} 

Warum ist das so? Vielen Dank im Voraus

Answer 1

Wäre nützlich, wenn Sie einen Plünderer einrichten. Wie auch immer, wenn Sie den Code sollte einen Aliasnamen für Ihren Controller verwenden möchten, wie:

let modal = $uibModal.open({ 
    template, 
    controller: 'NewModelCtrl', 
    controllerAs: 'NewModel', 
    windowClass: 'modal-rule-create' 
}); 

Vielleicht ist Ihr modal das ist Unordnung.

Ich hoffe, es hilft.

Answer 2

Hier wird der HTML-Code, Fenster-Rendering ist nicht geschehen

<div uib-modal-window="modal-window" class="modal fade ng-scope ng-isolate-scope in" role="dialog" index="0" animate="animate" ng-style="{'z-index': 1050 + $$topModalIndex*10, display: 'block'}" tabindex="-1" uib-modal-animation-class="fade" modal-in-class="in" modal-animation="true" style="z-index: 1050; display: block;"></div> 

Answer 3

ich die Geige aktualisiert durch die Struktur der divs verändert und hinzugefügt jquery Referenzen updated fiddle

In Ihrem Fall sicherstellen, dass Sie hinzugefügt haben jQuery vor bootstrap.js, versuchen Sie die Versionskonflikt zu sehen oder zu ändern versuchen -

let modal = $uibModal.open({ 
    templateUrl = '../modal/newModel.html', 
    controller: 'NewModelCtrl', 
    controllerAs: 'NewModel', 
    windowClass: 'modal-rule-create' 
}); 

Sie auf diese Fragen beziehen können, wie sie sim haben ilar Problem wie bei Ihnen -

Can't open a modal window in angularjs, using bootstrap

ui.bootstrap modal loading html but not showing anything

Answer 4

ein Problem gefunden.

Vielleicht wird jemand nützlich sein:

Angular 1.6.5 Angular-ui-Bootstrap 2.5.0

Es gibt den folgenden Code ein:

$httpProvider.interceptors.push([ 
    '$injector', 
    function ($injector) { 
     return $injector.get('AuthInterceptor'); 
    } 
]); 

Und:

.factory('AuthInterceptor', function ($rootScope, $q, AUTH_EVENTS, Filters) 
{ 
    return { 
     request: function (config) { 
      let regEx = /.+\.html$/; 
      let template = regEx.test(config.url); 

      if (!template) { 
       if (config.url !== "/uaa/oauth/token" && 
      Filters.get('token')) { 
        config.headers.Authorization = 'Bearer ' + 
      Filters.get('token'); 
       } 
      } 

      return config; 
     }, 
     response: function (response) { 
      let regEx = new RegExp('.+\.html$'); 
      let template = regEx.test(response.config.url); 
      let data; 

      if (!template) { 
       if (response.status && response.status !== 200) { 
        return $q.reject(response); 
       } 

       data = response.data || response; 
       return $q.resolve(data); 
      } 

      return response; 
     }, 
     responseError: function (response) { 
      $rootScope.$broadcast({ 
       401: AUTH_EVENTS.notAuthenticated, 
       403: AUTH_EVENTS.notAuthorized, 
       419: AUTH_EVENTS.sessionTimeout, 
       440: AUTH_EVENTS.sessionTimeout, 
       500: 'bad-request' 
      }[response.status], response); 
      return $q.reject(response); 
     } 
    }; 
}) 

In der alten Version von meinem Code, Winkel versuchen, Vorlage Vorlage Cache von Modal Fenster. Aber in meinem Code nach der Verarbeitung wurde es nicht zurückgegeben.