4

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

范围滑块错误

我已经安装了 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>

4

2 回答 2

4

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

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

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

于 2016-07-06T12:21:50.713 回答
0

因为您引用了错误的范围变量，所以它应该minRangeSlider代替rangeSlider

标记

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

编辑

删除angular.jscdn 引用，因为您已经angular从中加载文件ionic-bundle.js

于 2016-03-02T21:38:36.740 回答