I just need to make a div fullscreen whenever a user clicks on that div. I know this can be done via javascript and jquery. But i want to know if there is any pure angular js method of doing it. Any suggestions in this regard would be appreciated
You can use a fullscreen directive like this ones:
https://github.com/hrajchert/angular-screenfull
https://github.com/fabiobiondi/angular-fullscreen
One way is to use ngClass to apply a fullscreen class based on a boolean scope property. And use ngClick to toggle the scope property when clicked...
<div ng-click="isFullScreen = !isFullScreen"
ng-class="{fullscreen: isFullScreen}">click me</div>
Fiddle
Making a div fullscreen is(should be) about css, so you can change your div's css class via angular like:
html
<div ng-class="{fullScreenDiv: isFullScreen}">...</div>
<div ng-click="makeFullScreen()"></div>
js
$scope.isFullScreen = false;
$scope.makeFullScreen = function(){
$scope.isFullScreen = true;
};
fullScreenDiv is css class and isFullScreen is a variable in your controller scope. Change isFullScreen variable to enable/disable full screen.
Meaining of ng-class="{fullScreenDiv: isFullScreen}" is if isFullScreen expression evaluates to true then apply fullScreenDiv css class to element.
Related
I'm attempting to learn AngularJS (background in BackboneJS). I have a div with some content inside, and I hope to render this div as a modal upon clicking inside of it:
<div class="stickynote"> Content here </div>
My thinking is to add a modal class that I can style in CSS. However, I'm not too sure how to add the modal class upon clicking (and conversely, removing the modal class upon clicking after the modal is rendered). Would I have to use ng-click and somehow set the class property from the JavaScript (myApp.js) file?
If you want to use your own modal styling and if you simply want to achieve adding an extra item to class attribute of your element, you can use a combination of ng-class and ng-click:
<div class="stickynote"
ng-class="{yourModalCSSClass: isModalOpen}"
ng-click="isModalOpen = true">
And somewhere else, you need another ng-click to turn it off:
<button ng-click="isModalOpen = false">Close modal</button>
Beware that both div and button must be in the same scope hierarchy to be able to use the same isModalOpen value. And by the way, I haven't tried this code but this should give you an idea. If you have a controller/directive, you can set isModalOpen from there by introducing functions in the scope:
// controller
$scope.toggleModal = function () {
$scope.isModalOpen = !$scope.isModalOpen;
}
<div ...
ng-click="toggleModal()">
<button ng-click="toggleModal()">...
If you're open to using a third-party solution, ng-dialog is an outstanding solution for modals+Angular.
https://github.com/likeastore/ngDialog
I find it extremely difficult to make an animation in angular, comparing to jquery. There are so many versions of angular animation fadein and fadeout that I found them from blogs/ tutorials/ etc, some of them are on older version of angular. Angular's seems to be very inconsistent when a newer version of it comes out to replace the old ones. I can't see any standard way of doing it. Hence I don't know where to start.
I just to fade in a form or a html doc when the button is clicked.
html,
<button ng-click="loadInclude" >Load Include Form</button>
<div ng-include="'form.php'" ng-if="readyToLoadForm===true"></div>
angular,
var app = angular.module("myapp", ['ngAnimate']);
app.controller("FormController",function($scope) {
$scope.readyToLoadForm = false;
$scope.loadInclude = function(e) {
$scope.readyToLoadForm = true;
};
}
);
any ideas?
you can use a ng-show or ng-hide in this case
<div ng-show="readyToLoadForm" class="animate-show animate-hide">TEST HERE</div>
when using angular-animate.js angular will add and remove several classes to this item when showing and hiding. based on that classes we can set a css animation to the element.
here is a simple plunker
for ng-include animation
ng-leave .ng-leave-active .ng-enter-active classes add to the element. there is a little desc about classes added when animating. and that desc is from ngAnimate
here is the ng-enter demo Plunker
here is the reference for how the classes assigned to the element when animation elements in angularjs
I would like to add an iframe to a page when certain links are clicked and remove it when other mouse events happen on the page. From what I can see, it seems that using an AngularJS directive would be the best way to do this. What I'm not sure about is what is the best way to format the directive. I'm thinking of making the directive at the attribute level...something like this:
<div myIframeDirective></div>
What I'm not sure of is the best way of removing/adding the directive contents (an iframe and a header above it) when various click events happen on the main page. Not looking for anyone to write the code for me...just looking for examples of how this can be best accomplished.
You should be using ng-if.
<iframe src="http://www.example.com/" ng-if="showIframe"></iframe>
<button ng-click="showIframe = !showIframe">Click me to show/hide the iframe</button>
Here's a working example:
var app = angular.module('app', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<iframe src="http://www.example.com/" ng-if="showIframe"></iframe>
<button ng-click="showIframe = !showIframe">Click me to show/hide the iframe</button>
</div>
In Angular, ng-if will remove the iframe from the DOM if it is false.
This means the URL will NOT be requested until ng-if is true.
<iframe ng-if="frameDisplayed" ng-src="{{src}}"></iframe>
And use the link
Toggle
Then in your controller, you can control what your iframe display:
$scope.src = 'https://angularjs.org';
In an angularjs service, I am adding the HTML for an accordion-group to the DOM of an accordion element. What results is the display of the accordion-group as if it were a panel - no title bar, no collapse behavior.
I'm sure it is because the accordion gets initialized before the content is added. The jQueryUI accordion has a refresh method for such occasions, but not sure how to get the angualrui accordion to recognize the new accordion group.
hope the following steps help :
get the reference of the element where you want to add the accordion
HTML : <div id = "myAccordion"> </div>
Controller : var parent = angular.element("#myAccordion");
Compile your accordion template and attach it to the parent
Controller: var accordion = $compile("<div accordion> </div>")($scope);
parent.append(accordion);
but this is a work around you should ideally have a directive to do DOM manipulation , perhaps you are coding with jquery in mind.
I am somewhat new to using Angular and AngularStrap directives. I need to use the tab directive with static markup like the example:
<div data-fade="1" bs-tabs>
<div data-title="'Home'"><p>Static tab content A</p></div>
<div data-title="'Profile'"><p>Static tab content B</p></div>
</div>
On another part of the page I would like to display a div only when the first tab is selected. The div is not part of the tabs, but is in the same overall controller. How can I show/hide this div based on the selected tab?
Something like this?
<div ng-show="???? active tab stuff here ????">Home tab is selected</div>
Thanks for any help.
As shown in the example on the AngularStrap page the active tap is stored in
tabs.activeTab
So you can use this property to conditionally show display something else like so
<div ng-show="tabs.activeTab == 0">The first tab is active</div>
UPDATE
Even with non object tabs you can just bind a model against the bs-tabs to store the active ID like so:
<div data-fade="1" ng-model="tabs.activeTab" bs-tabs>
Here is an updated plnkr. (Click on the 3rd tab and see the 'Test' text appear)
I found somewhat of a hack to resolve this issue for now. This does not seem like the best approach, so if someone has a better idea, please share.
I realized that the bsTabs directive is creating data-toggle attributes for each tab. By watching the data-toggle shown event, I am able to recognize the tab change and display the div. The controller code looks like this:
$scope.HomeTabSelected = true;
function watchTab() {
$('a[data-toggle="tab"]').on('shown', function (e) {
$scope.$apply($scope.HomeTabSelected = (e.target.innerHTML == "Home"));
})
}
setTimeout(watchTab, 2000); // setTimeout necessary to allow directive to render
and the HTML div uses ng-show.
<div ng-show="HomeTabSelected">Home tab is selected</div>