Angular bootstrap uibModal shows only backdrop

I'm trying to implement angular bootstrap modal on a module. But the result I get only shows the modal backdrop and no div/content of the modal. Below is my code for the angular module/component and also my declaration

import {DataBossNewRuleComp} from "../component/new-rule-modal";
import 'angular-ui-bootstrap';

export default angular
    .module('ClaimsApp', [
        'ui.bootstrap'
    ])
    .component('dataBossClinicalRulesList', {
        template: require('./index.html'),

        controller: function($rootScope,$state,$compile,$scope,$uibModal) {

            //create new rule modal
            $scope.showRuleModal = function () {
                let items = ['item1', 'item2', 'item3'];

                let modalInstance = $uibModal.open({
                    component: DataBossNewRuleComp,
                    resolve: {
                        items: function () {
                            return items;
                        }
                    }
                });

                modalInstance.result.then(function (doReload) {
                    if(doReload) $scope.rulesDt.reloadData(null,true)
                })
            }

and this below is the DataBossNewRuleComp used in the modal declaration

let comp = angular.module('ClaimsApp.modalComp', []).component('modalComponent', {
    templateUrl: 'index.html',
    bindings: {
        resolve: '<',
        close: '&',
        dismiss: '&'
    },
    controller: function () {
        var $ctrl = this;

        $ctrl.$onInit = function () {
            $ctrl.items = $ctrl.resolve.items;
            $ctrl.selected = {
                item: $ctrl.items[0]
            };
        };

        $ctrl.ok = function () {
            $ctrl.close({$value: $ctrl.selected.item});
        };

        $ctrl.cancel = function () {
            $ctrl.dismiss({$value: 'cancel'});
        };
    }
});

export {comp as RuleComponent};

This only shows the backdrop. I'm using webpack to export and import components.

Comments

Sign In or Register to comment.