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

时间:2017-07-17 09:29:54

标签: html angularjs webpack angular-ui-bootstrap

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

我的代码:

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

为什么?提前致谢

4 个答案:

答案 0 :(得分:2)

我通过更改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

答案 1 :(得分:0)

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

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

也许这会弄乱你的模态。

希望它有所帮助。

答案 2 :(得分:0)

这里的html代码,窗口渲染没有发生

MyTray::MyTray(QObject *parent) :
      QObject(parent)
{
//..........
    menu.addAction(new QAction("Выход",this));
    connect(menu.actions()[0],SIGNAL(triggered()),this,SLOT(delete_itself()));
    icn=QIcon(":new/prefix1/08-01.png");
    icon.setIcon(icn);
    icon.setContextMenu(&menu);
    connect(&icon,SIGNAL(activated(QSystemTrayIcon::ActivationReason)),this,SLOT(icon_clicked(QSystemTrayIcon::ActivationReason)));
    icon.show();
//..........
}
void MyTray::icon_clicked(QSystemTrayIcon::ActivationReason reason)
{
    if(reason==QSystemTrayIcon::Trigger)
    {
        QString s;
        for(int i=0;i<vec.count();i++)
        {
            s.append(vec[i].room);
            s.append(vec[i].isOpen ? ": открыт" : ": закрыт");
            if(vec.count()-1>i) s.append("\n");
        }
        QSystemTrayIcon::MessageIcon ic = QSystemTrayIcon::MessageIcon(QSystemTrayIcon::Information);
        icon.showMessage("Состояние",s,ic,20000);
    }
}

答案 3 :(得分:0)

发现问题。

也许有人会有用:

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

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