i have a tabs directive
app.directive('tabStructure', function () {
return {
restrict: 'E',
templateUrl: function (tElement, tAttrs) {
return tAttrs.templateUrl;
}
};
});
and in ui i have written a tab structure which calls different page
<div id="Admin" class="tab-pane {{toolbars.tabs.NewPage1}}">
<div class="tab-content">
<tab-structure template-url="/page/NewPage1"></tab-structure>
</div>
</div>
<div id="Admin" class="tab-pane {{toolbars.tabs.NewPage2}}">
<div class="ibox-content" style="padding: 10px 5px 0px 5px !important;border: 1px solid #E8ECEF;">
<tab-structure template-url="/page/NewPage2"></tab-structure>
</div>
</div>
<div id="Admin" class="tab-pane {{toolbars.tabs.NewPage3}}">
<div class="ibox-content" style="padding: 10px 5px 0px 5px !important;border: 1px solid #E8ECEF;">
<tab-structure template-url="/page/NewPage3"></tab-structure>
</div>
</div>
But the problem is that all the page which is inside the tab loads when the main page loads i want the pages to only load when i click the tab
how to do that
Set up a variable to handle the selected tab and use ng-if to load a tab. Multiple ways to do this of course. Here is one way.
// in controller
$scope.selectedTab = null;
// in view
// set up ngIf and ngClick for each tab respectively
<div class="tab-content" ng-click=“selectedTab = ‘tab1’”>
<tab-structure ng-if=“selectedTab === ‘tab1’” template-url="/page/NewPage1"></tab-structure>
</div>
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 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>
Context: I have a left-menu (navigator) and right-panel (content) divs. Every item from the navigator is linked to the ID of its section in the right-panel.
Problem: I'm trying to scroll the right panel to the corresponding section when clicking on the menu item from the navigation panel.
I am doing it with anchorScroll() and locator.hash() functions. It works, but it scrolls the whole page (navigation and content).
I have created two controllers: One for the parent (including the navigator) and other for the container (the one I want to scroll). When I click in the item from the menu, I am changing a variable within the scope.
Then, from the child scope, I am watching that variable, performing the scroll with
html:
html:
<!-- Navigation Panel -->
<div id="helpNavigatorPanel">
<ul>
<li ng-repeat="(value, item) in list" ng-click="setCurrentItem (item.title)">
<a style="helpNavigationItems" href="#">{{item.title}}</a>
</li>
</ul>
</div>
<div id="helpContentPanel"ng-controller="contentHelpController" >
<div id="scrollablePanel">
<!-- List of help elements -->
<ul>
<li ng-repeat="some in list">
<div id="{{some.title}}" style="margin-top: 3px; padding: 10px; border: 1px solid lightGrey;">
...
</div>
</div>
</li>
</ul>
</div>
</div>
js:
Scope parent:
$scope.setCurrentItem = function (currentItemID){
$scope.currentItemID = currentItemID;
}
Scope child:
$scope.$watch('currentItemID', function (divDestinyID) {
$location.hash(divDestinyID);
$anchorScroll();
});
The problem is that the whole page is scrolled.
Any idea ?
Thank you!
A possible solution is to make your "child" into a directive. That way, you can scroll on the element, rather than the entire page
content-help.directive.js
angular
.module('appModule')
.directive('contentHelp', contentHelp);
function contentHelp() {
var directive = {
bindToController: true,
controller: ContentHelpController,
controllerAs: 'vm',
restrict: 'EA',
scope: {
list: '=',
currentItemId: '='
},
templateUrl: 'contentPanel.html'
};
return directive;
}
ContentHelpController.$inject = ['$scope', '$element'];
/* #ngInject */
function ContentHelpController ($scope, $element) {
var vm = this;
$scope.$watch(function() {
return vm.currentItemId;
}, onIdChange);
////
function onIdChange(newId) {
if(newId) {
var idElement = $element.find('#' + newId);
$element.animate({
scrollTop: idElement.offset().top
});
}
}
}
contentPanel.html
<div id="scrollablePanel">
<!-- List of help elements -->
<ul>
<li ng-repeat="some in vm.list">
<div id="{{::some.title}}" style="margin-top: 3px; padding: 10px; border: 1px solid lightGrey;">
...
</div>
</li>
</ul>
</div>
html
<!-- Navigation Panel -->
<div id="helpNavigatorPanel">
<ul>
<li ng-repeat="(value, item) in list" ng-click="setCurrentItem (item.title)">
<a style="helpNavigationItems" href="#">{{item.title}}</a>
</li>
</ul>
</div>
<div id="helpContentPanel" ng-controller="contentHelpController">
<content-help list="list" current-item-id="currentItemId"></content-help>
</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>
I have created a reusable directive and using it in two different forms but unable to able/disable the button in form which changes according to the check-box state in directive. I want disable the button until checkbox is not checked and disable it whenever check-box get unchecked.
My Fiddle
HTML
<div ng-app='demo'>
<form name="verification" ng-controller="myCtrl1">
<terms-conditions conditions="conditions"></terms-conditions>
<br>
<button class="btn-primary" ng-disabled="!checked" >Submit</button>
<hr>
</form>
<form name="bankinfo" ng-controller="myCtrl2">
<terms-conditions conditions="conditions"></terms-conditions>
<br>
<button class="btn-primary">Submit</button>
<hr>
</form>
</div>
JS
var demo = angular.module('demo', []);
demo.directive("termsConditions",function(){
return {
restrict:"E",
scope:{
conditions:'='
},
template:
"<div class='terms row'><span class='col-md-12'>{{conditions}}</span></div><br><input type='checkbox'><span>Yes, I agree to the terms and condtions</span>"
}
});
demo.controller("myCtrl1",function($scope){
$scope.conditions= " Payment terms" ;
})
demo.controller("myCtrl2",function($scope){
$scope.conditions= "Bank Terms" ;
});
CSS
span {
font-weight:bold;
}
.terms{font-weight: normal;
width: 500px;
height: 50px;
overflow-y: scroll;
padding: 5px 5px 5px 5px;
border-style: solid;
border-color: #666666;
border-width: 1px;
}
You almost got it right, you need to pass checked attribute value as the 2 way binding property and use ng-disabled.
<terms-conditions conditions="conditions" checked="checked"></terms-conditions> <br>
<button class="btn-primary" ng-disabled="!checked" >Submit</button>
Fiddle