Angular data binding not working inside ng-view

Question

I am using angular JS with angular-route and ui bootstrap to build a form with dropdownlist.

My problem is thaht when I put the ui-bootstrap dropdownlist component inside an ng-view, the component is not working as supposed, whereas when I put it outside of the ng-view it is working correctly.

For me it comes from the fact that the data binding is not working well but I didn't manage to find why.

Code is more explicit than words : see here on plnkr

<html>

<head>
  <script data-require="[email protected]" 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="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <script data-require="[email protected]" 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>

You will see that the Button dropdown is working well outside of the ng-view but will not work any more inside the ng-view.

Thanx in advance

Uncaught Error: Bootstrap's JavaScript requires jQuery Perhaps you could do something with that intel — Jorel Amthor
– Jorel Amthor, Commented Feb 25, 2016 at 14:10
@Jorel : I am not sure that the missing jQuery is the problem because the dropdown list is working correctly outside the ng-view so if the missing jQuery was the problem it would not work both inside and outside the ng-view — Moussa
– Moussa, Commented Feb 25, 2016 at 14:31
@Mohammed Dawood Ansari : I want that when I select an option of the dropdown button, the label of the button to be updated, see it works fine for the dropdownlist outside the ngview but doesn't work anymore in the dropdownlist inside the ngview — Moussa
– Moussa, Commented Feb 25, 2016 at 14:32

charlietfl · Accepted Answer · 2016-02-25 14:59:03Z

2

The problem is you are using href=# on the links. Remove the # and it works fine.

Since angular routing is using hash based routes the # is causing a route change attempt

DEMO

edited Feb 25, 2016 at 14:59

answered Feb 25, 2016 at 14:33

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Moussa Over a year ago

Thamk you charlietfl but this is not working even if I remove bootstrap.js I still have my problem which is : I want that when I select an option of the dropdown button, the label of the button to be updated

Collectives™ on Stack Overflow

Angular data binding not working inside ng-view

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related