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

时间:2016-02-25 14:03:41

标签: angularjs angular-ui-bootstrap angular-routing

我正在使用angular-route和ui bootstrap的角度JS来构建带有下拉列表的表单。

我的问题是当我把ui-bootstrap下拉列表组件放在ng-view中时,组件没有按照假设工作,而当我把它放在ng-view之外它正常工作。

对我来说,这是因为数据绑定效果不佳但我没有设法找到原因。

代码比单词更明确:请参阅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>

你会看到按钮下拉列表在ng-view之外运行良好,但在ng-view中不再有效。

提前完成

1 个答案:

答案 0 :(得分:2)

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

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

DEMO