Question

我的JQuery UI Slider窗口小部件未显示在模态内，但它确实以正常内容显示。

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

 <head>
  <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <link data-require="jqueryui@*" 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="jqueryui@*" 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();
});

Answer 1

这个答案不会混合AngularJS Directives for bootstrap Modal和JQUERYUI，所以我保留了JQuery UI模式和滑块：

Plunker Here

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

<head>
 <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
 <link data-require="jqueryui@*" 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="jqueryui@*" 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>

JS

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

Answer 2

问题是滑块是在页面加载时创建的，而不是在模式打开时创建的。然后滑块在开头创建，在模态中失败。

一个可能的解决方案是在模态打开时创建滑块（并在选择器中指定它将是模态中的滑块，否则看起来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="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link data-require="jqueryui@*" 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="jqueryui@*" 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>

模态对话框内的JQuery UI Slider

2 个答案: