JQuery UI Slider внутри Modal Dialog

Мой JQuery UI Slider виджет не отображается внутри модального, однако он отображается в обычном контенте.JQuery UI Slider внутри Modal Dialog

HERE'S THE PLUNKER

<!DOCTYPE html> 
<html ng-app="ui.bootstrap.demo"> 

<head> 
    <script data-require="[email protected]*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <link data-require="[email protected]*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" /> 
    <script data-require="[email protected]*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script> 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script> 
    <script src="example.js"></script> 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
</head> 

<body> 
<div ng-controller="ModalDemoCtrl"> 
    <script type="text/ng-template" id="myModalContent.html"> 
    <div class="modal-header"> 
     <h3 class="modal-title">I'm a modal!</h3> 
    </div> 
    <div class="modal-body"> 

     <span>SLIDER?</span> 
     <div class="slider"></div> 

    </div> 
    <div class="modal-footer"> 
     <button class="btn btn-primary" type="button" ng-click="ok()">OK</button> 
     <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button> 
    </div> 
</script> 
    <button type="button" class="btn btn-default" ng-click="open()">Open me!</button> 


    <div> 
    <span>SLIDER OK</span> 
    <div class="slider"></div> 
    </div> 
</div> 
</body> 
</html>

JavaScript

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']); 
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function($scope, $uibModal, $log) { 

    $scope.animationsEnabled = true; 
    $scope.open = function(size) { 

    var modalInstance = $uibModal.open({ 
    animation: $scope.animationsEnabled, 
    templateUrl: 'myModalContent.html', 
    controller: 'ModalInstanceCtrl', 
    size: size, 
    resolve: { 
     items: function() { 
     return $scope.items; 
     } 
    } 
}); 

modalInstance.result.then(function(selectedItem) { 

}, function() { 
    $log.info('Modal dismissed at: ' + new Date()); 
}); 
}; 
}); 


angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function($scope, $uibModalInstance, items) { 



$scope.cancel = function() { 
    $uibModalInstance.dismiss('cancel'); 
}; 
}); 
$(function() { 
    $(".slider").slider(); 
});

источник

2016-06-02 Tuco

Вопрос заключается в том, что бегунок создается при загрузке страницы, а не когда модальный открыта. Затем слайдер создается в начале и не работает в модальном режиме.

Возможным решением будет создание слайдера при открытии модального отображения (и указание в селекторе, что он будет слайдером внутри модального, в противном случае кажется, что jQuery будет создавать слайдер также для кода в шаблоне) ,

Вот демо модифицируя исходный код как можно меньше (я переместил ползунок создания функции, которая открывает и делает модальный):

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']); 
 
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function($scope, $uibModal, $log) { 
 

 
    $scope.items = ['item1', 'item2', 'item3']; 
 

 
    $scope.animationsEnabled = true; 
 

 
    $scope.open = function(size) { 
 

 
    var modalInstance = $uibModal.open({ 
 
     animation: $scope.animationsEnabled, 
 
     templateUrl: 'myModalContent.html', 
 
     controller: 'ModalInstanceCtrl', 
 
     size: size, 
 
     resolve: { 
 
     items: function() { 
 
      return $scope.items; 
 
     } 
 
     } 
 
    }); 
 

 
    modalInstance.rendered.then(function() { 
 
     $(".modal-body .slider").slider() 
 
    }); 
 

 
    modalInstance.result.then(function(selectedItem) { 
 
     $scope.selected = selectedItem; 
 
    }, function() { 
 
     $log.info('Modal dismissed at: ' + new Date()); 
 
    }); 
 
    
 
    }; 
 

 

 

 
}); 
 

 
// Please note that $uibModalInstance represents a modal window (instance) dependency. 
 
// It is not the same as the $uibModal service used above. 
 

 
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function($scope, $uibModalInstance, items) { 
 
    $scope.cancel = function() { 
 
    $uibModalInstance.dismiss('cancel'); 
 
    }; 
 
});

<script data-require="[email protected]*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
<link data-require="[email protected]*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" /> 
 
<script data-require="[email protected]*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script> 
 
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script> 
 
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div ng-app="ui.bootstrap.demo"> 
 
    <div ng-controller="ModalDemoCtrl"> 
 
    <script type="text/ng-template" id="myModalContent.html"> 
 
     <div class="modal-header"> 
 
     <h3 class="modal-title">I'm a modal!</h3> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <span>SLIDER?</span> 
 
     <div class="slider"></div> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button class="btn btn-primary" type="button" ng-click="ok()">OK</button> 
 
     <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button> 
 
     </div> 
 
    </script> 
 
    <button type="button" class="btn btn-default" ng-click="open()">Open me!</button> 
 

 
    <div> 
 
     <span>Slider OK</span> 
 
     <div class="slider"></div> 
 
    </div> 
 
    </div> 
 
</div>

источник

2016-06-02 17:33:48

Этот ответ не смешивать AngularJS Directives for bootstrap Modal и JQUERYUI, поэтому я постоянно JQuery UI модальных и слайдер:

Plunker Here

<!DOCTYPE html> 
<html lang="en"> 

<head> 
<script data-require="[email protected]*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
<link data-require="[email protected]*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" /> 
<script data-require="[email protected]*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script> 
<link rel="stylesheet" href="style.css" /> 
<script src="script.js"></script> 
</head> 

<body> 
<meta charset="utf-8" /> 
<title>dialog demo</title> 
<button id="opener">open the dialog</button> 
<div id="dialog" title="Dialog Title">I'm a dialog 
<div id="slider"></div> 
</div> 
</body> 
</html>

$(function() { 
$("#dialog").dialog({ 
    autoOpen: false 
}); 
$("#opener").click(function() { 
$("#dialog").dialog("open"); 
$("#slider").slider(); 
}); 
});

источник

2016-06-02 17:07:29 Tuco

JQuery UI Slider внутри Modal Dialog

ответ

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