带有用于 uiModal 的 Webpack 加载模板的 Angular 1.6.5答案

【问题标题】：Angular 1.6.5 with Webpack load template for uiModal带有用于 uiModal 的 Webpack 加载模板的 Angular 1.6.5
【发布时间】：2017-12-21 18:32:42
【问题描述】：

我正在尝试打开一个模式窗口。背景正在显示，但没有模态窗口。

我的代码：

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

这是为什么呢？提前致谢

【问题讨论】：

你的控制台有错误吗？
没有一个是纯洁的
你能在 templateUrl:''../modal/newModel.html' 中设置你的路径并确保该模板被加载
我使用 webpack html-loader 处理 html 文件，在 chrome devtools 中我会输出变量的值，它必须使用内联模板，但它不起作用
jsfiddle.net/2VbUG/1 喜欢我的

标签： html angularjs webpack angular-ui-bootstrap

【解决方案1】：

如果你设置一个 plunker 会很有用。无论如何，如果你想为你的控制器使用别名，代码应该是这样的：

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

也许这弄乱了你的模式。

希望对你有帮助。

【讨论】：

没有帮助

【解决方案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>

【讨论】：

【解决方案3】：

我通过更改 div 的结构更新了小提琴并添加了 jquery 引用 updated fiddle

在您的情况下，请确保您在 bootstrap.js 之前添加了 Jquery，尝试查看版本不匹配或尝试更改 -

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

你可以参考这个问题，因为他们有类似的问题 -

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

ui.bootstrap modal loading html but not showing anything

【讨论】：

【解决方案4】：

发现一个问题。

也许有人会对你有用：

Angular 1.6.5 Angular-ui-bootstrap 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);
        }
    };
})

在我的代码的旧版本中，角度尝试返回模态窗口的模板缓存。但是在我处理后的代码中它没有返回。

【讨论】：