CODEWITHSUNDEEP
javascriptjqueryhtmlcssangularjs
knocked loose
knocked loose

Reputation: 3314

AngularJS Code is working in one codepen, but breaks when moved

I have a range slider that is used to filter products. It works perfectly fine in this codepen, but when i moved it over to my large scaled product, it won't slide AND it breaks my count code on all the <divs> below it. Here is the product's codepen.

I am using Rzajac's range slider which can be found here.

HTML

  <rzslider
        rz-slider-floor="priceSlider.floor"
        rz-slider-ceil="priceSlider.ceil"
        rz-slider-model="priceSlider.min"
        rz-slider-high="priceSlider.max"
        rz-slider-step="{{priceSlider.step}}"></rzslider>

Angular

var app = angular.module('plunker', ['rzModule']);

app.controller('MainCtrl', function($scope) {

  $scope.priceSlider = {
    min: 0,
    max: 20,
    ceil: 20,
    floor: 0,
    step: 1
  };  

$scope.products = [
        {
            name: 'one',
                        height: '00'
                    },
          {
            name: 'two',
                        height: '10'
                    },
          {
            name: 'three',
                        height: '20'
                    }
  ];

  $scope.minFilter = function (p) {
        return p.height >= $scope.priceSlider.min;
    };

   $scope.maxFilter = function (p) {
        return p.height <= $scope.priceSlider.max;
    };
});

The slider is located in the "SIZE" tab, thanks for the help guys!

Upvotes: 0

Views: 485

Answers (1)

bvaughn
bvaughn

Reputation: 13487

You're using Angular 1.2.4 in the first Codepen and Angular 1.0.7 in the second. The older Angular is complaining that it doens't understand your directive:

Error: Invalid isolate scope definition for directive rzslider: =?

Upvotes: 4

Related Questions