0

I'm having issues to understand why UI Bootstrap is adding HTML I didn't write inside the dropdown.

Here is a JSFiddle showing the issue. You should see three <a> tags in the dropdown that are not written in the 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() {
    }
});

Am I doing something wrong ?

Note: I'm using ui-bootstrap-tpls-0.11.0.min.js.

2 Answers 2

4

You are doing something wrong indeed. You need to close the first a tag:

<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>
Sign up to request clarification or add additional context in comments.

Comments

0

Some HTML issue

<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>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.