应用角度引导放样例

Question

我想把下拉到我的项目，我从这个例子的代码。下拉列表如示例中所示，但当我单击它时，什么也不会发生。

<form class="form" name="form"  novalidate>
  <div class="btn-group" dropdown is-open="status.isopen">
    <button type="button"
            class="btn btn-primary dropdown-toggle"
            dropdown-toggle
            ng-disabled="disabled">
      Button dropdown <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>
  <div>
</form>   

现在，这个html的控制器：

angular.module('startupApp').controller('DropdownCtrl', function ($scope, $log) {
    $scope.items = [
        'The first choice!',
        'And another choice for you.',
        'but wait! A third!'
    ];

    $scope.status = {
        isopen: false
    };

    $scope.toggled = function(open) {
        $log.log('Dropdown is now: ', open);
    };

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

Answer 1

经过一番努力，我才找到了对我的案子起作用的答案。我只需要添加解析角到我的angular.module(‘myapp’解析角‘)。

Answer 2

我也有同样的问题，我通过删除行dropdown-toggle来解决

我不知道问题出在哪里，但这样做效果很好

这里我所做的:这是最初的例子：

    <!-- Single button -->
    <div class="btn-group" dropdown is-open="status.isopen">
      <button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
        Button dropdown <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>

这是没有dropdown-toggle的代码

<!-- Single button -->
<div class="btn-group" dropdown is-open="status.isopen">
  <button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
    Button dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

编辑：

如果您使用的是角用户界面引导版本: 0.10.0，则上述示例有效。

现在，我已经使用以下方法更改了ui引导程序

<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>

现在所有的一切都像一种魅力

Answer 3

在您的代码中有一些问题：

您的HTML无效，最后一个<div>标记不应该在那里

<form class="form" name="form" novalidate>
    <div class="btn-group" dropdown is-open="status.isopen">
        <button type="button"
                class="btn btn-primary dropdown-toggle"
                dropdown-toggle
                ng-disabled="disabled">
            Button dropdown <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li>
                <a href="#">Action</a>
            </li>
            <li>
                <a href="#">Another action</a>
            </li>
            <li>
                <a href="#">Something else here</a>
            </li>
            <li class="divider"></li>
            <li>
                <a href="#">Separated link</a>
            </li>
        </ul>
    </div>
</form>

您没有将ui.bootstrap作为模块依赖项引用。

angular.module('startupApp', [
    'ui.bootstrap'
])

你包括了正确的文件吗？

• AngularJS
• 角UI引导带
• 引导CSS

在控制器中不需要任何特殊的东西，dropdown和dropdown-toggle指令是自给自足的。

JsFiddle演示