4

Ionic アプリで Angular JS レンジ スライダーを使用しようとしていますが、以下のように表示されます。

レンジスライダーエラー

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.jsロードしているため、cdn 参照を削除します。angularionic-bundle.js

于 2016-03-02T21:38:36.740 に答える