如何在控制器ui-bootstrap类中使用模态

Question

我有一个login.js文件：

class loginModelController {
    constructor(){
    }
    open () {
    }
}
export const LogInModelComponent = {
    teamplateUrl: 'login.component.html',
    controller: loginModelController,
};

app.js调用的此控制器：

import {LogInModelComponent} from './component/login.js';

var app = angular.module('nav-module', ["ui.router",'ui.bootstrap']);
app.component('loginComponent',LogInModelComponent);
app.config(['$stateProvider',
'$urlRouterProvider',function($stateProvider,$urlRouterProvider) {
    $stateProvider
    .state('home',{
        url:'/home',
        component: 'loginComponent'
    });
    $urlRouterProvider.otherwise('/');
}]);

login.component.html像这样：

<div class="modal-demo">
            <div class="modal-header">
                <h3 class="modal-title" id="modal-title">modal!</h3>
            </div>
            <div class="modal-body" id="modal-body">
                <ul>
                    <li>
                       <p>item1</p>
                       <p>item2</p>
                    </li>
                </ul>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">Close</button>
            </div>
        <button type="button" class="btn btn-default" ng-click="$ctrl.open()">Open me!</button>
        <div class="modal-parent">
        </div>
    </div>

现在，我想将模式与login.component.html模板和login.js控制器一起使用。但是我不知道如何在登录控制器中使用ui-bootstrap模态的$ uibModal属性>

请帮助！