부트 스트랩의 JS를 사용한 AngularJS

Question

AngularJS 앱을 작성하고 부트 스트랩의 js와 함께 문제가 발생했습니다. 아래의 버튼을 원하는대로 작동 시키려면 (클릭했을 때 배타적으로 추가 된 '활성'클래스가 있어야 함) 부트 스트랩의 JS가 필요합니다.

<div class="btn-group" data-toggle="buttons"> 
    <label class="btn btn-primary"> 
     <input type="radio" value="one" ng-model="myData[$index].number"> one 
    </label>  
    <label class="btn btn-primary"> 
     <input type="radio" value="two" ng-model="myData[$index].number"> two                
    </label>  
</div> 

문제는 내가 부트 스트랩의의 JS를 사용하는 경우, NG 모델이 작동을 멈출 것으로 보인다 및 데이터가 내 변수에 표시되지 않는다는 것이다.

그러나 부트 스트랩의 JS를 제거하면 ng-model이 예상대로 작동하지만 버튼이 정상적으로 작동하지 않습니다.

bootstrap.js를 angular's ui bootstrap JS으로 바꾸어 보았지만 동일한 결과가 나타났습니다. 아마도 부트 스트랩의 JS 사용법을 오해하고 있을까요?

This 예상되는 동작입니다. angularJS를 사용할 때 이것은 작동하지 않습니다. 는 불행하게도 부트 스트랩의 JS 당신은 부트 스트랩의 버튼 구성 요소의 각 버전을 사용해야 jQuery를 ...

어떤 도움 감사,

감사

Answer 1

이 필요합니다. 나는 UI Bootstrap 또는 AngularStrap 프로젝트에서 이들을 추천합니다.

Answer 2

이전에도 이와 같이 실행되었습니다. 당신이해야 할 일은 .factory() 레시피를 사용하여 모델 데이터를 저장하고, 지시어 또는 컨트롤러 이건간에 범위에 맞게 바인딩하는 것입니다.

그런 다음 마크 업에서 컨트롤러 또는 지시문의 범위 내에 있지 않으면 ng-bind를 사용하여 바인딩합니다.

<!-- content is inside of 'myCtrl' scope --> 
    <div class="btn-group" data-toggle="buttons" ng-bind="Example.radioGroup"> 
     <label class="btn btn-primary"> 
      <input type="radio" value="one" ng-model="radioGroup[$index].number"> one 
     </label>  
     <label class="btn btn-primary"> 
      <input type="radio" value="two" ng-model="radioGroup[$index].number"> two                
     </label>  
    </div> 

범위에 공장을 주입해야합니다. 여기에 하나 개의 공장의 예

myApp.factory('radioFactory', function(){ 
    return { 
     radioGroup: { 
      number:["one","two"] 
     } 
    } 
}) 

myApp.controller ('myCtrl', function($scope,radioFactory){ 
    $ scope.Example = radioFactory; 
}) 

Answer 3

당신이 UI Bootstrap를 사용 Angular의 지시 방법과 bootstrap을 사용합니다. 예상했는데, 버튼을 클릭했을 때 function이 호출되기를 원하십니까? Bootstrap 님의 방법을 사용하지 않으려 고 시도하십시오. Angular 님의 방법을 사용하십시오. 즉, ng-click입니다. ng-repeat를 사용하는 경우

.controller('myCtrl', function ($scope) { 
    $scope.myData = [*your array here*]; 
    $scope.call = function(param){ 
    console.log(param); //your 'myData' index should be printed in console, for example 
    }; 
}) 

또한, 입력의 목록을 작성하는 당신의 방법이보다 효율적으로 할 수있다 : HTML 코드의 예를 들면 다음과 같습니다

<label class="btn btn-primary"> 
    <input type="radio" value="one" ng-model="myData[$index].number" ng-click="call(myData[$index].number)"> one 
</label> 

그리고 당신의 controller의 범위는 어떤 종류의해야 단지 같은 : 모델이 '수'와 '텍스트'속성, 당신의 radioGroup 모델에서 기존 쉬하는 무슨으로 교체가있는 경우

<!-- content is inside of 'myCtrl' scope --> 
<div class="btn-group" data-toggle="buttons" ng-bind="Example.radioGroup"> 
    <label class="btn btn-primary" ng-repeat="n in radioGroup"> 
     <input type="radio" value="{{n.number}}" ng-model="n.number"> {{n.text}} 
    </label> 
</div> 

가 가정 귀하의 데이터를 프런트 엔드에 저장하십시오. 그러나 ng-repeat를 사용하지 않고 지금 사용하지 않을 경우 나중에 다시 향상시킬 수 있습니다.