Question

$ modal不会出现内部html文件。当我点击“添加”时，会出现灰色窗口但没有内部html内容。我试图放置一个像“http://www.google.com”这样的外部网址，但它确实有效！我放置了partials / dialog.html下的文件。我正在使用Ionic框架。

index.html：

<!DOCTYPE html>
<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Todo List App</title>

    <!-- ionic css -->
    <link href="lib/css/ionic.css" rel="stylesheet">

    <!-- Bootstrap css -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- ionic/angularjs scripts -->
    <script src="lib/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
      <script src="cordova.js"></script>

    <!--Angular-UI bootstrap script -->
    <script src="js/ui-bootstrap-tpls-0.10.0.min.js"></script>

    <!-- your app's script -->
    <script src="js/angular-local-storage.js"></script>

        <script src="js/app.js"></script>
  </head>

    <body ng-controller="MyCtrl">

        <header class="bar bar-header bar-positive">
            <div class="buttons">
                <button class="button button-icon icon ion-ios7-minus-outline" ng-click="showDelete = !showDelete"></button>
            </div>
            <h1 class="title">Todo List</h1>
            <button  class="button button-icon icon ion-ios7-bolt" ng-click="clearItems()"></button>
            <button class="button button-icon icon  ion-ios7-plus-outline" ng-click="addItem()"></button>

        </header>

    <ion-content class="has-header">

        <ion-list show-delete="showDelete"
                  on-delete="onItemDelete(item)"
                  option-buttons="itemButtons">

            <ion-item ng-repeat="item in items" 
                      item="item"
                      href="#/item/{{item.id}}">
                Item {{ item.id}}
            </ion-item>

        </ion-list>

    </ion-content>

</body>
<!--</html>-->

app.js：

var myApp = angular.module('ionicApp', ['ionic', 'LocalStorageModule', 'ui.bootstrap']);

    myApp.controller('MyCtrl', function($scope, $modal, localStorageService) {
        $scope.items = [{id: 1}];
        $scope.itemButtons = [
            {
                text: 'Edit',
                type: 'button-assertive',
                onTap: function(item) {
                    alert('Edit Item: ' + item.id);
                }
            },
            {
                text: 'Share',
                type: 'button-calm',
                onTap: function(item) {
                    alert('Share Item: ' + item.id);
                }
            }
        ];
        $scope.onItemDelete = function(item) {
            if (localStorageService.get('hey'))
            {
                var values = new Array();
                values = localStorageService.get('hey');
                var indexMy = values.indexOf(item);
                values.splice(indexMy, 1);
                localStorageService.add('hey', values);
            }
            //Remove the item from the GUI
            $scope.items.splice($scope.items.indexOf(item), 1);
        };

            $scope.reloadItem = function() {
                var values = new Array();
                if (localStorageService.get('hey'))
                {
                    values = localStorageService.get('hey');
                    var index;
                    for (index = 0; index < values.length; index++) {
                        $scope.items.push({id: values[index]});
                    }
                }
            };

            $scope.clearItems = function() {
                localStorageService.clearAll();
                $scope.items = [];
            };


            $scope.reloadItem();
            $scope.addItem = function() {
                //Test - should be remove on release date
                $scope.items.push({id : "sharon"});

                var modalInstance = $modal.open({
                    templateUrl: 'partials/dialog.html',
                    controller: ModalInstanceCtrl
                });
                modalInstance.result.then(
                        function(newItemInput) {
                            var values = new Array();
                            if (localStorageService.get('hey'))
                            {
                                values = localStorageService.get('hey');
                            }
                            values.push(newItemInput);
                            //$scope.items.push({id : values[0]});
                            localStorageService.add('hey', values);

                        },
                        function() {
                            //$scope.lol = "no";
                        });
            };
        });
var ModalInstanceCtrl = function($scope, $modalInstance) {
    $scope.newItemObject = {};
    $scope.ok = function() {
        $modalInstance.close($scope.newItemObject.newItemInput);
    };
    $scope.cancel = function() {
        $modalInstance.dismiss();
    };

};

内部html“dialog.html”：

<html>
    <head>
        <title>title</title>
    </head>
    <body>



<div>
            <p>Enter your new item</p>
        <!--    <p><input type="text" ng-model="newItemObject.newItemInput" class="form-control" placeholder="Text input">{{newItemInput}}</p>  -->
            <p><button>OK</button>
            <button>Cancel</button></p>
        </div>
    </body>
</html>

Answer 1

我遇到了bootstraps css干扰离子模态的问题，尝试注释css/bootstrap.min.css并查看它是否有任何区别。

$ modal不会出现在内部html文件中

1 个答案: