Угловое связывание данных не работает внутри ng-view

Я использую угловую JS с угловым маршрутом и загрузочным буфером ui для создания формы с выпадающим списком.Угловое связывание данных не работает внутри ng-view

Моя проблема заключается в том, что когда я помещаю компонент выпадающего списка ui-bootstrap внутри ng-view, компонент работает не так, как предполагалось, тогда как когда я помещаю его вне ng-view, он работает правильно.

Для меня это происходит из-за того, что привязка данных не работает хорошо, но мне не удалось найти причину.

код более четко, чем слова: смотрите здесь на 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="[email protected]*" 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>

Вы увидите, что кнопка выпадающий хорошо работает за пределами нг ракурса, но не будет больше работать внутри нг ракурса.

Thanx заранее

источник

2016-02-25 Mouss

Uncaught Ошибка JavaScript Bootstrap требует JQuery Может быть, вы могли бы сделать что-то с этим разведданных –

Что именно вы хотите сделать? –

Избавьтесь от 'bootstrap.js' не нужно – charlietfl

Проблема заключается в использовании href=# по ссылкам. Удалите #, и он отлично работает.

Поскольку угловой маршрутизации использует хэш на основе перенаправляет # вызывает попытку изменить маршрут

DEMO

источник

2016-02-25 14:33:06 charlietfl

Thamk you charlietfl, но это не работает, даже если я удаляю 'bootstrap.js'. У меня все еще есть моя проблема: это я хочу, когда я выбираю вариант выпадающая кнопка, метка кнопки для обновления – Mouss

@charlietfl, +1 очень хорошее нахождение. здорово! –

Угловое связывание данных не работает внутри ng-view

ответ

Смежные вопросы