與Ionic Framework一起使用時，角度JS觸控滑塊顯示NaN錯誤

我對Angular非常陌生，所以對我來說很裸露。我試着去使用角度JS系列滑蓋我離子應用程序，但它顯示如下：與Ionic Framework一起使用時，角度JS觸控滑塊顯示NaN錯誤

我已經安裝NPM angularjs滑塊但在控制檯中的錯誤 - 未捕獲的ReferenceError：應用程序是沒有定義的。任何人都可以幫忙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>

來源

2016-03-02 Duncan

有同樣的問題在我的項目，但只有當我在Chrome（桌面版，但在手機模式：CTRL + SHIFT + I和CTRL + SHIFT + M），或在移動版Chrome（iOS和Android）...任何新聞？ – Oziris

加載angular文件如果您使用jQuery 3.0.0，有不兼容，試用jQuery 2.2.4

我在github上打開一個問題： https://github.com/angular-slider/angularjs-slider/issues/365

嘗試新版本5.1.1，它可以解決您的問題。

來源

2016-07-06 12:21:50 Oziris

感謝@Oziris這是問題對我來說 – Duncan

因爲你曾引用錯了作用域變量，它應該是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

來源

2016-03-02 21:38:36

謝謝你的快速反應，但滑塊仍然是壞的... :( – Duncan

@DuncanMolesworth看看我的更新 –

再次，謝謝你的建議，但不是工作，安排如下： '<！ - range滑塊 - > <！ - 您的應用程序的JS - > 」 – Duncan

與Ionic Framework一起使用時，角度JS觸控滑塊顯示NaN錯誤

回答

相關問題