Question

我有问题要理解为什么UI Bootstrap正在添加HTML而我没有在下拉列表中写入。

这是显示问题的JSFiddle。您应该会在下拉列表中看到三个<a>标记，这些标记未在HTML中写入。

HTML：

<div ng-app="app" ng-controller="ctrl">
    <div class="dropdown">
        <a id="new" class="actionButton dropdown-toggle">
            New<span class="right-caret"></span>
            <ul class="dropdown-menu drop-right">
                <li ng-repeat="action in newActions">
                    <a ng-click="action.run()">{{action .name}}</a>
                </li>
            </ul>
        </a>
    </div>
</div>

JS：

var app = angular.module("app", ["ui.bootstrap"]);

app.controller("ctrl", function($scope) {
    $scope.newActions = [{
            name: "File",
            run: createFile
        }, {
            name: "Folder",
            run: createFolder
    }];

    $scope.status = {
        isopen: false
    };

    $scope.toggleDropdown = function($event) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope.status.isopen = !$scope.status.isopen;
    };

    function createFile() {
    }

    function createFolder() {
    }
});

我做错了吗？

注意：我正在使用ui-bootstrap-tpls-0.11.0.min.js。

Answer 1

你确实做错了什么。您需要关闭第一个a代码：

<div ng-app="app" ng-controller="ctrl">
    <div class="dropdown">
        <a id="new" class="actionButton dropdown-toggle">
            New<span class="right-caret"></span>
        </a>
        <ul class="dropdown-menu drop-right">
             <li ng-repeat="action in newActions">
                 <a ng-click="action.run()">{{action .name}}</a>
             </li>
        </ul>
    </div>
</div>

Answer 2

一些HTML问题

<div ng-app="app" ng-controller="ctrl">
        <div class="dropdown">
            <a id="new" class="actionButton dropdown-toggle">
                New<span class="right-caret"></span>
             </a> // Issue here - Close the "a" tag here
                <ul class="dropdown-menu drop-right">
                    <li ng-repeat="action in newActions">
                        <a ng-click="action.run()">{{action .name}}</a>
                    </li>
                </ul>
        </div>
    </div>

UI Bootstrap下拉列表是添加我没写的HTML

2 个答案: