Commit 53d7c6b3 authored by haxxxton's avatar haxxxton Committed by Valentin Hervieu

update to use latest ui.bootstrap components (#441)

parent fdb3580f
......@@ -24,7 +24,7 @@ app.directive('clickableLabel', function () {
};
});
app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) {
app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $uibModal) {
//Minimal slider config
$scope.minSlider = {
value: 10
......@@ -568,9 +568,9 @@ app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) {
}
};
$scope.openModal = function () {
var modalInstance = $modal.open({
var modalInstance = $uibModal.open({
templateUrl: 'sliderModal.html',
controller: function ($scope, $modalInstance, values) {
controller: function ($scope, $uibModalInstance, values) {
$scope.percentages = JSON.parse(JSON.stringify(values)); //Copy of the object in order to keep original values in $scope.percentages in parent controller.
var formatToPercentage = function (value) {
......@@ -589,10 +589,10 @@ app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) {
translate: formatToPercentage
};
$scope.ok = function () {
$modalInstance.close($scope.percentages);
$uibModalInstance.close($scope.percentages);
};
$scope.cancel = function () {
$modalInstance.dismiss();
$uibModalInstance.dismiss();
};
},
resolve: {
......
......@@ -308,17 +308,17 @@
rz-slider-tpl-url="custom-template.html"
></rzslider>
<i>* You need to include ngSanitize (angular-sanitize.js) in order to use <a href="https://docs.angularjs.org/api/ng/directive/ngBindHtml" target="_blank">ng-bind-html</a></i><br/>
<tabset class="code">
<tab heading="HTML">
<uib-tabset class="code">
<uib-tab heading="HTML">
<div hljs hljs-include="'snippets/customTemplateSlider.html'" hljs-language="html"></div>
</tab>
<tab heading="JS">
</uib-tab>
<uib-tab heading="JS">
<div hljs hljs-include="'snippets/slider_custom_template.js'" hljs-language="js"></div>
</tab>
<tab heading="your-custom-template.html">
</uib-tab>
<uib-tab heading="your-custom-template.html">
<div hljs hljs-include="'custom-template.html'" hljs-language="html"></div>
</tab>
</tabset>
</uib-tab>
</uib-tabset>
</article>
<article>
......@@ -347,17 +347,17 @@
rz-slider-options="slider_custom_directive_inside_template.options"
rz-slider-tpl-url="directive-in-custom-template.html"
></rzslider>
<tabset class="code">
<tab heading="HTML">
<uib-tabset class="code">
<uib-tab heading="HTML">
<div hljs hljs-include="'snippets/directive_in_custom_template.html'" hljs-language="html"></div>
</tab>
<tab heading="JS">
</uib-tab>
<uib-tab heading="JS">
<div hljs hljs-include="'snippets/directive_in_custom_template.js'" hljs-language="js"></div>
</tab>
<tab heading="directive-in-custom-template.html">
</uib-tab>
<uib-tab heading="directive-in-custom-template.html">
<div hljs hljs-include="'directive-in-custom-template.html'" hljs-language="html"></div>
</tab>
</tabset>
</uib-tab>
</uib-tabset>
</article>
<article>
......@@ -461,31 +461,31 @@
</br>
<button type="button" ng-click="openModal()" class="btn btn-default btn-lg">Open Modal!</button>
<tabset class="code">
<tab heading="HTML">
<uib-tabset class="code">
<uib-tab heading="HTML">
<div hljs hljs-include="'snippets/slider_modal.html'" hljs-language="html"></div>
</tab>
<tab heading="JS">
</uib-tab>
<uib-tab heading="JS">
<div hljs hljs-include="'snippets/slider_modal.js'" hljs-language="js"></div>
</tab>
<tab heading="sliderModal.html">
<uib-tab heading="sliderModal.html">
<div hljs hljs-include="'sliderModal.html'" hljs-language="html"></div>
</tab>
</tabset>
</uib-tab>
</uib-tabset>
</article>
<article>
<h2>Sliders inside tabs</h2>
<p>Price 1: {{tabSliders.slider1.value}}</p>
<p>Price 2: {{tabSliders.slider2.value}}</p>
<tabset>
<tab heading="Slider 1" select="refreshSlider()">
<uib-tabset>
<uib-tab heading="Slider 1" select="refreshSlider()">
<rzslider rz-slider-model="tabSliders.slider1.value"></rzslider>
</tab>
<tab heading="Slider 2" select="refreshSlider()">
</uib-tab>
<uib-tab heading="Slider 2" select="refreshSlider()">
<rzslider rz-slider-model="tabSliders.slider2.value"></rzslider>
</tab>
</tabset>
</uib-tab>
</uib-tabset>
<show-code js-file="tabSliders" html-file="tabSliders"></show-code>
</article>
......
<tabset class="code">
<tab heading="JS">
<uib-tabset class="code">
<uib-tab heading="JS">
<div hljs hljs-include="'snippets/'+ jsFile + '.js'" hljs-language="js"></div>
</tab>
<tab heading="HTML">
</uib-tab>
<uib-tab heading="HTML">
<div hljs hljs-include="'snippets/'+ htmlFile + '.html'" hljs-language="html"></div>
</tab>
</tabset>
</uib-tab>
</uib-tabset>
......@@ -8,9 +8,9 @@ $scope.percentages = {
}
};
$scope.openModal = function () {
var modalInstance = $modal.open({
var modalInstance = $uibModal.open({
templateUrl: 'slider_modal.html',
controller: function ($scope, $modalInstance, values) {
controller: function ($scope, $uibModalInstance, values) {
$scope.percentages = JSON.parse(JSON.stringify(values)); //Copy of the object in order to keep original values in $scope.percentages in parent controller.
......@@ -30,10 +30,10 @@ $scope.openModal = function () {
translate: formatToPercentage
};
$scope.ok = function () {
$modalInstance.close($scope.percentages);
$uibModalInstance.close($scope.percentages);
};
$scope.cancel = function () {
$modalInstance.dismiss();
$uibModalInstance.dismiss();
};
},
resolve: {
......
<tabset>
<tab heading="Slider 1" select="refreshSlider()">
<uib-tabset>
<uib-tab heading="Slider 1" select="refreshSlider()">
<rzslider rz-slider-model="tabSliders.slider1.value"></rzslider>
</tab>
<tab heading="Slider 2" select="refreshSlider()">
</uib-tab>
<uib-tab heading="Slider 2" select="refreshSlider()">
<rzslider rz-slider-model="tabSliders.slider2.value"></rzslider>
</tab>
</tabset>
</uib-tab>
</uib-tabset>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment