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-Bootstrap资产：

<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时，模式都会自动打开。

Stacksnippet：

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>

Plunker：http://plnkr.co/edit/5qrD7hB6i8vQEqa8jZ1G?p=preview

关于在进入状态时打开模态的UI-Router常见问题解答（请注意，由于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

我通过将路由添加为来自其他州的“child”来解决此问题，该路由引用相同的templateUrl Just (3 +)

templateUrl: 'Assets/app/templates/tamplate_list.html'

AngularJs在模态上打开路径页面

2 个答案: