Angular JS Touch Slider 在与 Ionic Framework 一起使用时显示 NaN 错误

Question

我正在尝试将 Angular JS 范围滑块与我的离子应用程序一起使用，但它显示如下：

range slider error

我已经安装了 npm angularjs-slider，但控制台出现错误 - Uncaught ReferenceError: app is not defined。谁能帮忙。 app.js 下面的代码后跟 index.html 代码。谢谢

  angular.module('ionicApp', ['ionic', 'ngAutocomplete', 'rzModule', 'ui.bootstrap'])

  .controller("MainCtrl", function() {
    console.log("Main Controller says: Hello World");
  })

  .config(function($stateProvider, $urlRouterProvider) {
    $stateProvider

      .state('main', {
      url: "/main",
      templateUrl: "templates/main.html",
      controller: 'MainCtrl'
    })

    .state('page', {
      url: "/page",
      templateUrl: "templates/page.html",
    })

    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('/main');
  });

  app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
    //Range slider config
    $scope.minRangeSlider = {
      minValue: 10,
      maxValue: 90,
      options: {
        floor: 0,
        ceil: 100,
        step: 1
      }
    };
  });

<!DOCTYPE html>
<html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title></title>
  <link href="lib/ionic/css/ionic.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/rzslider.css">

  <!-- ionic/angularjs js -->
  <script src="lib/ionic/js/ionic.bundle.js"></script>

  <!-- cordova script -->
  <script src="cordova.js"></script>

  <script src="ngautocomplete.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
  <script src="js/ui-bootstrap-tpls.js"></script>
  <script src="js/rzslider.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
  <!-- your app's js -->
  <script src="js/app.js"></script>
</head>

<body ng-app="ionicApp" ng-controller="MainCtrl" disable-tap>
  <ion-nav-view></ion-nav-view>
</body>

</html>

我 link 通过以下方式将其添加到我的页面模板：

<div class="wrapper">
  <article>
    <rzslider rz-slider-model="rangeSlider.minValue" rz-slider-high="rangeSlider.maxValue" rz-slider-options="rangeSlider.options"></rzslider>
  </article>
</div>

Answer 1

因为您引用了错误的范围变量，它应该是 minRangeSlider 而不是 rangeSlider

标记

<rzslider 
   rz-slider-model="minRangeSlider.minValue" 
   rz-slider-high="minRangeSlider.maxValue" 
   rz-slider-options="minRangeSlider.options">
</rzslider>

编辑

删除 angular.js cdn 引用，因为您已经从 ionic-bundle.js

加载 angular 文件

Answer 2

如果你用的是jQuery 3.0.0，不兼容，试试jQuery 2.2.4

我在 github 上打开了一个问题： https://github.com/angular-slider/angularjs-slider/issues/365

试用新版本 5.1.1，它可以解决您的问题。

Angular JS Touch Slider 在与 Ionic Framework 一起使用时显示 NaN 错误

Angular JS Touch Slider displaying NaN error when used with Ionic Framework

angularjs

ionic-framework

nouislider