Question

我试图从angular ui bootstrap实现一个模态。在我的Web应用程序上实现它后，我得到了一个意外的行为，这是我点击文本后模式确实出现的，但是显示的不是我想要的路径，而是Web应用程序的导航栏。

这是代码

的index.html

<!DOCTYPE html> 
<html ng-app="MyApp">
<head>
    <title></title>
    <base href='/'> 
    <!-- load bootstrap from CDN and custom CSS -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">


    <!-- JS -->
    <!-- load angular and angular-route via CDN -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
     <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"></script>

    <script src="app.js"></script>
    <script type="text/javascript" src="controller.js"></script>



</head>
<body>

    <header>
        <div class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a href="/" class="navbar-brand"><span class="glyphicon glyphicon-book"></span>Testing App</a>
                </div>  

                <ul class="nav navbar-nav navbar-right" ng-controller="ModalController">
                    <li><a href="#" ng-click="open('lg')">Write</a></li>
                </ul>
            </div>
        </div>
    </header>

    <div ng-view></div>

</body>
</html>

app.js

angular.module('MyApp', ['ngRoute', 'ui.bootstrap'])

    .config(function($routeProvider, $locationProvider) {

        $routeProvider

            .when('/', {
                templateUrl: 'home.html',
                controller: 'HomeController'

            });

        $locationProvider.html5Mode(true);  
    });

controller.js

angular.module('MyApp')

    .controller('HomeController', function($scope, $location) {

        $scope.data = "Hello Angular";
    })



    .controller('ModalController', function($scope, $location, $modal, $log) {

        $scope.items = ['item1', 'item2', 'item3'];

        $scope.open = function (size) {

            var modalInstance = $modal.open({
                templateUrl: 'modal.html',
                controller: function() {


                },
                size: size,
                resolve: {
                    items: function () {
                        return $scope.items;
                    }
                }
            });

            modalInstance.result.then(function (selectedItem) {
                $scope.selected = selectedItem;
            }, function () {
                $log.info('Modal dismissed at: ' + new Date());
            });
        };
    });

home.html的

<div class="container">
    <h1>Awesome {{ data }}</h1>

</div>

modal.html（模态假设显示的路径）;

<h1>Need to show this actually</h1>

图片，单击触发模态事件的文本后显示的内容

enter image description here

Answer 1

补充说：

<script type="text/ng-template" id="modal.html">
<h1>Need to show this actually</h1>
</script>

之后

<ul class="nav navbar-nav navbar-right" ng-controller="ModalController">

它适用于plunker：

http://plnkr.co/edit/bPuemujbTiX7U8AnY607?p=preview

角度ui模态意外行为

1 个答案: