Angular 1.6.5 with Webpack爲uiModal加載模板

Question

我試圖打開一個模式窗口，背景顯示出來，但沒有一個非常模型的窗口。

我的代碼：

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

這是爲什麼？在此先感謝

Answer 1

如果您設置一個重擊器會很有用。無論如何，如果你想使用一個別名控制器的代碼應該是這樣的：

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

也許這就是搞亂你的模式。

希望它有幫助。

Answer 2

這裏的HTML代碼，窗口的渲染並沒有發生

<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

我已經改變div的結構更新了小提琴，並加入jQuery的引用updated fiddle

你的情況，請確保您已加入bootstrap.js之前jQuery的，嚐嚐看的版本不匹配或嘗試改變 -

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

您可以參考這個問題，因爲他們有SIM卡像你這樣的ILAR問題 -

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

ui.bootstrap modal loading html but not showing anything

Answer 4

發現一個問題。

也許有人會是有用的：

角1.6.5 角的UI，引導2.5.0

有下面的代碼：

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

和：

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

在我的代碼的舊版本中，角度嘗試返回模式的模板緩存窗口。但在處理後的代碼中沒有返回。