个人中心
gpt4 book ai didi

angularjs - Angular JS Touch Slider 与 Ionic 框架一起使用时显示 NaN 错误

转载 作者：行者123 更新时间：2023-12-01 00:44:14 24 4
gpt4 key购买 nike

我正在尝试将 Angular JS 范围 slider 与我的 ionic 应用程序一起使用，但它显示如下:

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>


我通过以下方式将其链接到我的页面模板: 

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

最佳答案

如果您使用 jQuery 3.0.0，存在不兼容问题，请尝试使用 jQuery 2.2.4

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

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

关于angularjs - Angular JS Touch Slider 与 Ionic 框架一起使用时显示 NaN 错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35758496/

24 4 0
文章推荐： jquery - 如何让 jQuery load() 在 fadeOut/fadeIn 之前完成？
文章推荐： javascript - 如何强制 Puppeteer 等待非常大的 HTML 表中的所有行完全加载并显示在 DOM 中
文章推荐： python - 在段落中查找字典值，如果段落没有字典值，则返回 NA
文章推荐： jquery - 如何使用 jQuery 对文本框进行标签更改
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com