I have a jsfiddle here - https://jsfiddle.net/r6Lff67n/
There is no Angular here but just an example of the structure.
I have an outer div with a max-height inside of which there is content that could scroll if the content is bigger than the surrounding div.
My question is is there a simple way in Angular to add a class if the scroll bars are used so I can style it different if it will scroll
<div class="scroll-outer">
<div class="scroll-inner">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</div>
Finding whether a DOM object has scrollbar or not can be easily done by comparing scrollHeight with clientHeight of an element.
So, I pulled up a directive that can compare these heights and add a class to the element with which it is bound to. Something like:
var myApp = angular.module('myApp', []);
myApp.directive("testDirective", function() {
return {
link: function(scope, elem, attrs) {
if (elem[0].clientHeight < elem[0].scrollHeight) {
// scrollbar available
// adding a custom class with sample CSS
elem[0].classList += " mytest"
}
}
}
})
Also, custom class name(s) can be externalized using directive's attrs.
Here's the working runnable code snippet and updated fiddle.
Notice that one of the two lists of blocks has mytest class's CSS (border) based on whether it has scrollbar or not. You can add your custom CSS there (in mytest class)
var myApp = angular.module('myApp', []);
myApp.directive("testDirective", function() {
return {
link: function(scope, elem, attrs) {
if (elem[0].clientHeight < elem[0].scrollHeight) {
// scrollbar available
// adding a custom class with sample CSS
elem[0].classList += " mytest"
}
}
}
})
.block {
background: red;
height: 50px;
margin-bottom: 2px;
}
.scroll-outer {
overflow-y: auto;
max-height: 200px;
width: 250px;
display: inline-block
}
.mytest {
border: 3px solid black /* change this as you wish */
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div class="scroll-outer" test-directive>
<div class="scroll-inner">
<div class="block"></div>
<div class="block"></div>
</div>
</div>
<div class="scroll-outer" test-directive>
<div class="scroll-inner">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</div>
</body>
Related
My html
<div id="deviceInputContainer">
<div class="row noMarg">
<div class="form col-xs-12" style='padding-left:0px;margin-right:15px;'>
<div class="form col-xs-12 noPad left">
<h2 class="page-title">Certification Projects
<span class='icon-settings-big' style='cursor:pointer;float:right;margin-top:-10px;' title='settings' uib-popover-template="dynamicPopoverPageSettings.templateUrl"
popover-placement="bottom-right" popover-trigger="click outsideClick" popover-class="settingsClass" ></span>
</h2>
</div>
<div class="helpMessage" style="margin-left:-15px;margin-right:-15px;" ng-show="dashboardData.userPreferences.showHelpTextEnabled">
<p class="help-text-content col-sm-12 helpText-color helpText-size" style='margin-bottom:15px;'>Your open projects are listed below- but you can search for other projects if you want. Just
set the search criteria below.</p>
</div>
</div>
</div>
</div>
My controller code to toggle popover and on window resize close popover.
But popover hide is not working on window rezise, can somebody please help me where am i doing wrong
$scope.dynamicPopoverPageSettings = {
templateUrl: 'myPopoverTemplatePageSetting.html',
title: 'Page Settings',
isPopOpen: false,
setIsPopOpen: function() {
$scope.dynamicPopoverPageSettings.isPopOpen = !$scope.dynamicPopoverPageSettings.isPopOpen;
console.log("$scope.dynamicPopoverPageSettings.isPopOpen == " + $scope.dynamicPopoverPageSettings.isPopOpen);
},
setIsPopFalse: function() {
$scope.dynamicPopoverPageSettings.isPopOpen = false;
console.log("$scope.dynamicPopoverPageSettings.isPopOpen == " + $scope.dynamicPopoverPageSettings.isPopOpen);
}
};
var w = angular.element($window);
w.bind('resize', function () {
$('.settingsClass ').popover('hide');
});
When using angular if not using it already id recommend using Angular-Bootstrap-native AngularJS directives based on Bootstrap's markup and CSS. I've included this link to their site, it's the 0.14.3 docs. Also including this Codepen with an example of what I think you're trying to accomplish. Hope it helps, I can always help and modify it further.
function exampleController($scope, $window) {
$scope.popoverVisible = false;
function onResize() {
$scope.popoverVisible = false;
// manuall $digest required as resize event
// is outside of angular
$scope.$digest();
}
function cleanUp() {
angular.element($window).off("resize", onResize);
}
angular.element($window).on("resize", onResize);
$scope.$on("$destroy", cleanUp);
}
angular
.module("example", ["ui.bootstrap"])
.controller("exampleController", exampleController);
html,
.container,
.container-fluid {
width: 100%;
height: 100%;
background-color: #333;
color: #fff;
text-align: center;
button {
margin-top: 10%;
font-weight: bold;
}
button:focus {
outline: 0;
}
.popover {
.popover-title,
.popover-content {
color: #333;
}
}
}
<div class="container-fluid" ng-app="example">
<div class="container" ng-controller="exampleController">
<button uib-popover="I have a title!" popover-title="The title." popover-placement="bottom-right" popover-is-open="popoverVisible" type="button" class="btn btn-primary">
CLICK ME
</button>
</div>
</div>
I wanted to disable a div section using ng-disabled, but it dint work. I've also tried using fieldset in place of div.
ng-disabled seems not working.
Below is the view part:
<div ng-disabled="model.disableDate">
<div>Date</div>
<div ion-datetime-picker ng-model="model.timeEntryDate" ng-change="onTimeEntryDateChange()" date="true" time="false" monday-first="true" am-pm="true">{{model.timeEntryDate|| "Select" | date: "dd/MM/yyyy"}} <i class="icon ion-ios-calendar-outline"></i> </div>
</div>
This is the controller part:
if ($scope.model.pageState === condition) {
$scope.model.disableDate = true;
}
Any way this calender is being popped even on the disabling condition.
You can't disable DIV. Disable work with button and input types only. You can try with css. Use ng-class.
<div ng-class="{ 'div-disabled': model.disableDate}"> // give condition here as per your scenario
.div-disabled
{
pointer-events: none;
opacity: 0.5;
background: #CCC;
}
You can create an attribute directive to disable any div. See below:
var app = angular.module("myApp", []);
app.directive("disableSection", function() {
return {
restrict : "A",
link:function(scope,element,attr,ctrl){
element.css({
cursor :"not-allowed",
opacity: "0.5",
background: "#CCC"
});
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div disable-section>This is disabled div</div>
</body>
You can use pointer-events: none for disabling the div:-
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.obj = {};
$scope.obj.disabled = false;
$scope.clickMe = function(){
alert('div is enabled');
}
});
.disabled {
pointer-events: none;
}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-class="(obj.disabled)?'disabled':''" style="width:100px;height:100px;border:1px solid black">
<a style="cursor:pointer" ng-click="clickMe()">Click Me</a>
</div>
<button ng-click="obj.disabled = !obj.disabled">{{(obj.disabled)?'Enable':'Disable'}}</button>
</div>
I have a nested state .
The view associated to it my app header.
it looks like this:
<ion-view cache-view="false">
<div class="navbar-fixed-top navbar-header bar bar-header " ng-if="showHeader">
<div class="container row">
{{ showSubHeader}}
<div ng-if="showSubHeader" class="topPull" draggable >
<button ng-if="showSubHeader" class="button-icon"><img src="img/topImg.jpg"></button>
</div>
</div>
</div>
</ion-view>
Now, I want div to be shown when showSubHeader is true.
The expression {{ showSubHeader }} changes from true to false correctly, but div does not hide/show according to value variable.
Is there a way to fix it?
Initially on page load, div shows/hides accordingly but div does not hide when variable value changes after loading.
controller:
.controller('AppCtrl', function($scope, $rootScope, $ionicModal, $timeout, $ionicSlideBoxDelegate, $state) {
$scope.showHeader=true;
$scope.showSubHeader=true;
$scope.checkBill= function(){
$scope.showSubHeader=false;
$state.go('menu.TotalBill')
}
})
Change $scope.showSubHeader=false; to $scope.showSubHeader =!$scope.showSubHeader;, then you will be fine.
Check out my example:
var app = angular.module('app', []);
app.controller('myctrl', ['$scope', function($scope) {
$scope.test = true;
$scope.hidden_test = true;
$scope.click = function() {
$scope.hidden_test = !$scope.hidden_test;
};
}]);
.outer {
background: #e2e2e2;
border: 1px solid #000000;
.inner {
background: #c2c2c2;
border: 1px solid #00aa00;
padding: 1px 0 0 25px;
}
}
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div ng-app="app">
<div ng-controller="myctrl">
<div class="outer" ng-if="test">
<p>Test</p>
<div class="inner" ng-if="hidden_test">
<p>Hidden Test</p>
</div>
<button ng-click="click()">Click</button>
</div>
</div>
</div>
How to watch offset top position (of each element) and if the distance to top screen border lower than 100 px, i need to hide this div. (each div can move on page). Help please write Angular directive.
I can't watch each element top offset.
var app = angular.module('app', []);
app.app.directive('blah', function() {
return {
restrict: 'A',
link: function(scope, element) {
element.show();
scope.$watch(function() {
return element.offset().top > 120
}, function(outOfBorder) {
if (outOfBorder) {
element.hide()
console.log(outOfBorder)
} else {
element.show()
console.log(outOfBorder)
}
});
}
}
});
.all {
height: 100px;
width: 300px;
border:1px solid;
overflow: scroll;
}
.elements {
height: 30px;
width: 300px;
border:1px solid red;
float: left;
clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="all" ng-app="app">
<div class="elements" blah></div>
<div class="elements" blah></div>
<div class="elements" blah></div>
<div class="elements" blah></div>
<div class="elements" blah></div>
<div class="elements" blah></div>
<div class="elements" blah></div>
<div class="elements" blah></div>
</div>
You simply add a watcher with a function (not tested + probably need some renaming):
angular.module('blah').directive('blah', function() {
return {
restrict: 'A',
link: function(scope, element) {
scope.$watch(function() {
return element.offset().top < 100
}, function(outOfBorder) {
if (outOfBorder) {
element.hide()
} else {
element.show()
}
});
}
}
});
The reason why your code is not working is that value you passed to a $watch is evaluated before $watch is executed. As a result, you watch top offset on the element at the time link is executed - this is a constant number.
EDIT:
If your elements are not absolutely positioned, calling hide will cause all the remaining elements to move up which eventually will make all elements hidden. In this case use element.addClass('invisible') and element.removeClass('invisible') instead of hiding and showing and define css class as:
.invisible { visibility: hidden; }
Changed visibility will not affect other element position.
For angular I'm using a Directive to Toggle Class:
app.directive('toggleClass', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('click', function() {
element.toggleClass(attrs.toggleClass);
});
}
};
});
And the HTML I have multiple times:
<div class="tab" toggle-class="open">
<div class="title">
<p>Tab title</p>
</div>
<div class="content">
<!-- This element hidden by default, needs toggle -->
<p>Foobar</p>
</div>
</div>
It works, but when I click somewhere in the .content-element, it also toggles. But I want it to stay active. Not toggle-ing back to the close-state.
Is there an easy way to let it work like this:
- click on .title
- toggle .content (by adding .open to the .tab-element.
Added .parent()
app.directive('toggleClass', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('click', function() {
element.parent().toggleClass(attrs.toggleClass);
});
}
};
});
And toggle-class to the title element.
<div class="tab">
<div class="title" toggle-class="open">
<p>Tab title</p>
</div>
<div class="content">
<!-- This element hidden by default, needs toggle -->
<p>Foobar</p>
</div>
</div>
I just consider that you don't need a custom directive to do this kind of things.
Here is two exemples, first one with the angular way to toggleClass, second one in a global angular way.
Both will meet your needs covered by this directive.
First One :
<div ng-repeat="aTab in [{},{},{},{},{}]" class="tab" ng-class="{'open':isOpen}">
<div class="title" ng-click="isOpen = !isOpen">
<p>Tab title</p>
</div>
<div class="content">
<!-- This element hidden by default, needs toggle -->
<p>Foobar</p>
</div>
</div>
with this CSS
.content {
display:none;
}
.open .content {
display:block;
}
Second one :
<div ng-repeat="aTab in [{},{},{},{},{}]" class="tab">
<div class="title" ng-click="aTab.show = !aTab.show">
<p>Tab title</p>
</div>
<div class="content2" ng-show="aTab.show">
<!-- This element hidden by default, needs toggle -->
<p>Foobar</p>
</div>
</div>
You can see theses exemples in this plunker
Hope it helped
EDIT : Updated the exemples and plunker to show how it works with an ng-repeat