Angular 数据绑定在 ng-view 中不起作用

Question

我正在使用 angular JS 和 angular-route 和 ui bootstrap 到 build 一个带有下拉列表的表单。

我的问题是，当我将 ui-bootstrap 下拉列表组件放在 ng-view 中时，该组件无法正常工作，而当我将其放在 ng- 视图之外时查看它是否正常工作。

对我来说，这是因为数据绑定工作不正常，但我没能找到原因。

代码比文字更明确：在 plnkr

上查看此处

<html>

<head>
  <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
  <script data-require="angular-route@*" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
  <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <script data-require="bootstrap@3.3.6" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap.js"></script>


  <link href="style.css" rel="stylesheet" />
  <script src="script.js"></script>
</head>

<body ng-app="routeApp">
  <h1>Hello Plunker!</h1>
  <nav>
    <a href="#/home" class="btn btn-primary">Page d'accueil</a>
    <a href="#/contact" class="btn btn-success">Page de contact</a>
  </nav>
  <div ng-view></div>
  
  <div ng-controller='DropdownCtrl'>

    <div class="btn-group" uib-dropdown is-open="status.isopen">
      <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
        {{button}} <span class="caret"></span>
      </button>
      <ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button">
        <li role="menuitem">
          <a href="#" ng-click="change(action)" ng-repeat="action in actions">{{action}}</a>
        </li>
      </ul>
    </div>

  </div>
</body>

</html>

您会看到 Button 下拉菜单在 ng-view 之外工作良好，但在 ng-view 内将不再工作。

提前致谢

Answer 1

问题是您在链接上使用 href=#。删除 #，它工作正常。

由于 angular 路由使用基于散列的路由 # 导致路由更改尝试

DEMO

Angular 数据绑定在 ng-view 中不起作用

Angular data binding not working inside ng-view

angularjs

angular-routing

angular-ui-bootstrap