AngularJs 在模态上打开路由页面

Question

在我的角度消息应用程序中，我可以选择从模板中选择消息。我需要以模态打开模板列表。

我的问题是我有一个模板列表作为控制器+视图

如何在不复制模板列表代码的情况下打开视图。

 $stateProvider
    .state('app', {})
    .state('app.email', {
    }).state('app.email.compose', {
        url: '/compose',
        data: {
            pageTitle: 'Email Compose'
        },
        templateUrl: 'Assets/app/templates/email_compose.html'
    })
    .state('app.manage', {
    })
    .state('app.manage.templates', {
        template: '<div ui-view></div>',
        url: '/templates',
        abstract: true
    })
    .state('app.manage.templates.list', {
        url: '/',
        data: {
            pageTitle: 'Email List'
        },
        templateUrl: 'Assets/app/templates/tamplate_list.html'
    });

在我的应用路由中，我想打开app.manage.template.list从app.email.compose作为模态

我该怎么做？

Answer 1

这可以使用UI-Bootstrap轻松完成： https://angular-ui.github.io/bootstrap/演练：

加载 Bootstrap CSS 资产，注意你不需要 JS 和 jQuery：

<link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

加载 UI 引导程序资产：

<script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.min.js"></script>

在应用程序中注入ui.bootstrap模块：

angular.module('app', [
    'ui.router',
    'ui.bootstrap'
]);

使用状态定义的onEnter方法打开一个新模态：

.state('myModalState', {
    'url': '/myModalUrl',
    'onEnter': [
                 '$uibModal',
        function ($uibModal) {
            $uibModal.open({
                'controller': 'myModalController',
                'templateUrl': 'myModalTemplate.html'
            }).result.then(
                function closed (item) {
                    // Executed when uibModalInstance is closed, returns value
                },
                function dismissed () {
                    // Executed when modal is dismissed/canceled
                }
            );
        }
    ]
});

为您的模态创建一个控制器并注入$uibModalInstance：

.controller('myModalController', [
             '$scope', '$uibModalInstance',
    function ($scope,   $uibModalInstance) {
        $scope.item = 'foobar';
        $scope.ok = function () {
            $uibModalInstance.close($scope.item);
        };
        $scope.cancel = function () {
            $uibModalInstance.dismiss('cancel');
        };
    }
]);

最后是模态的模板：

<div class="modal-header">
    <h4 class="modal-title">Title</h4>
</div><!-- /.modal-header -->
<div class="modal-body">
    {{item}}
</div><!-- /.modal-body -->
<div class="modal-footer">
    <button type="button" class="btn btn-warning" ng-click="cancel()">
        Cancel
    </button>
    <button type="button" class="btn btn-success" ng-click="ok()">
        Ok
    </button>
</div><!-- /.modal-footer -->

现在，每次您访问/myModalUrl或ui-sref或state.go以myModalState模态时，模态都会自动打开。

堆栈片段：

angular.module('app', [
    'ui.router',
    'ui.bootstrap'
]);
angular.module('app').config([
             '$stateProvider', '$urlRouterProvider',
    function ($stateProvider,   $urlRouterProvider) {
        $urlRouterProvider.otherwise('/');
        $stateProvider.state('root', {
            url: '/',
            templateUrl: 'root.html',
        });
        $stateProvider.state('modal', {
            url: '/modal',
            onEnter: [
                         '$uibModal', '$state',
                function ($uibModal,   $state) {
                    $uibModal.open({
                        'controller': 'modal',
                        'templateUrl': 'modal.html',
                    }).result.then(
                        function closed (item) {
                            // Executed when uibModalInstance is closed, returns value
                            $state.go('root');
                        },
                        function dismissed () {
                            // Executed when modal is dismissed/canceled
                            $state.go('root');
                        }
                    );
                }
            ]
        });
    }
]);
angular.module('app').controller('modal', [
             '$scope', '$uibModalInstance',
    function ($scope,   $uibModalInstance) {
        $scope.item = 'foobar';
        $scope.ok = function () {
            $uibModalInstance.close($scope.item);
        };
        $scope.cancel = function () {
            $uibModalInstance.dismiss('cancel');
        };
    }
]);

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" />
    <script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
    <script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
    <script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
    <script type="text/ng-template" id="root.html">
        <a ui-sref="modal">Open route in modal</a>
    </script>
    <script type="text/ng-template" id="modal.html">
        <div class="modal-header">
            <h4 class="modal-title">Title</h4>
        </div>
        <div class="modal-body">
            {{item}}
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-warning" ng-click="cancel()">
                Cancel
            </button>
            <button type="button" class="btn btn-success" ng-click="ok()">
                Ok
            </button>
        </div>
    </script>
  </head>
  <body ui-view></body>
</html>

普伦克：http://plnkr.co/edit/5qrD7hB6i8vQEqa8jZ1G?p=preview

UI-路由器关于在进入状态时打开模式的常见问题解答(请注意，由于对 UI 引导模式指令进行了一些更改，它已经过时了(：

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-open-a-dialogmodal-at-a-certain-state

以下是UI-Bootstrap的模态指令的参考：

https://angular-ui.github.io/bootstrap/#/modal

Answer 2

我通过将路由添加为来自另一个状态的"子"来解决它，该状态引用相同的模板Url templateUrl: 'Assets/app/templates/tamplate_list.html'

$stateProvider
     .state('app.email.compose', {
         url: '/compose',
         data: { pageTitle: 'Email Compose' },
         templateUrl: 'Assets/app/templates/email_compose.html'
     }).state('app.email.compose.template', {
         url: '/template',
         data: { pageTitle: 'Email Compose', modal: true },
         parent: 'app.email.compose',
         templateUrl: 'Assets/app/templates/tamplate_list.html'
     }).state('app.manage.templates.list', {
                url: '/',
                data: { pageTitle: 'Email List' },
                templateUrl: 'Assets/app/templates/tamplate_list.html'
    });