I have two element in the same page:
one is into a div and another one is into an overlay.
I want to display only the element inside the overlay and not element in the page (it is also hide by overlay).
I don't know how can I prevent this... I bind the directive by attributes, maybe should I pass some other params to element?
This is plunker example: Plunker
As you can see, I want to hide text in page when modal (simple example, but I use another plugin) is open and show it in modal and viceversa... I preferer to use only directive and/or some more attributes in the element...
I test a lot but I don't find solution...
Code:
angular...[]....directive('example', function() {
return {
restrict: 'A',
replace: true,
link: function($scope, $element, $attrs) {
$scope.display = "IT's WORK TEXT BY DIRECTIVE";
}
};
});
<script type="text/ng-template" id="myModalContent.html">
<!--Modal-->
<div class="modal-body">
<span example="" class="text-danger"><br><br>{{display}}<br><br></span>
</div>
</script>
<button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
<span example="" class="text-danger"><br><br>{{display}}<br><br></span>
You can use a combination of ng-show and a js closure passed to the modal for toggling the visibility of your text. So... the display visibility will be controlled by the ng-show
<span example="" ng-show="elemVisibility" class="text-danger"><br><br>{{display}}<br><br></span>
You can toggle the visibility with a js helper function
function _setElemVisiblity (isModalOpen) {
$scope.elemVisibility = !isModalOpen;
}
You can pass this as a callback to your modal and trigger it whenever you open/close the modal.
Updated plunk here
Related
I am trying to display a div with an error message with ng-show along with ng-class set as fade with an expression. The message fades away after the set time, however, the div created to display the error message does not get removed.
I would like the created div to be removed as well when the message fades. Could someone please help?
Here is my codepen - link
Here is my code for the html
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"
type="text/css" />
<section data-ng-app="app" class="container" data-ng-controller="messageController">
<hr />
<div data-ng-show="showError" ng-class="{fade:doFade}" class="alert alert-danger"><strong>Error:</strong> {{errorMessage}}</div>
<button data-ng-click="fakeError()" class="btn btn-default">Fake an Error</button>
<hr />
</section>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
and the JS code
var app = angular.module('app',[]);
app.controller('messageController', ['$scope', '$timeout', function($scope, $timeout){
$scope.showError = false;
$scope.doFade = false;
$scope.fakeError = function(){
//reset
$scope.showError = false;
$scope.doFade = false;
$scope.showError = true;
$scope.errorMessage = 'We\'re mixing apples and oranges!';
$timeout(function(){
$scope.doFade = true;
}, 2500);
};
}]);
ng-show sets only style display conditionaly, soyour div will be always present in the page, only not visible if condition is falsy.
Use ng-if instead to conditionaly add/remove element.
Easiest way to animate ng-if is to use angular-animate library. Using this lib you will get control over rendering stages of various directives.
These stages are marked via specific css classes, which you can target and style
transitions of element.
For ng-if directive, there are available classes .ng-enter, .ng-leave, .ng-enter-active, .ng-leave-active
Via these classes you can define desired transition, in your case it is fade.
Example of fading on remove:
https://codepen.io/anon/pen/NzyqvL
I am using this component in my example, but when I click on my icon, my popover is not displayed.
When I click on an icon it should display the popover but currently, it is not display anything.
Here is my code (and this is the CodePen):
<script type="text/ng-template" id="myPopoverTemplate.html">
<div>hhh</div>
</script>
First, from my own experience I recommend using angular-bootstrap for things in that scope.
Second, if you really want it to work, make sure the bootstrap scripts are correctly loaded. Then try to listen to the click event with ng-click on the button and trigger the popover on it.
Here is the code to achieve what you want.
Here is the plunkr : https://plnkr.co/edit/fBPJ8LfOFGlgcCHvRWSM?p=preview
Regards,
scope.popover = function() {
$("[data-toggle=popover]").popover({
html: true,
content: $('.popper-content').html(),
placement: attrs.popoverPlacement
});
};
Here is the html:
<button type="button" popover-placement="bottom" class="popper btn-link" popover ng-click="popover()" data-toggle="popover">
4 Peoples
</button>
Regards,
Anchor tag on which html popover
<a popover-trigger="outsideClick" popover-placement="top" ng-click="sendMessagePopover.open()" type="button" popover-append-to-body="true" popover-is-open="sendMessagePopover.isOpen" uib-popover-template="sendMessagePopover.templateUrl">Menu</a>
ng-Template that contains close button on which click popover should close.
<script type="text/ng-template" id="message-to-pnd-popover.tpl.html">
<div class="well">
<form name="myForm" ng-controller="myController">
<div class="form-group">
<span class="btn btn-primary" ng-click="sendMessagePopover.close()">Close</span>
</div>
</form>
</div></script>
angular controller code
angular.controller('myController',['$scope',function($scope){
$scope.sendMessagePopover = {
on: false,
isOpen: false,
templateUrl: 'message-to-pnd-popover.tpl.html',
open: function() {
$scope.sendMessagePopover.isOpen = true;
},
close: function() {
$scope.sendMessagePopover.isOpen = false;
}
}]);
When we click on anchor link it popover the template and when we click outside anywhere it close the popover.
I want to close the popover when user click on close button that i put in template.
But it's not working.
I am new this technology, help out with proper example.
The popover-trigger="outsideClick" is designed to close the popover when clicking anywhere outside of the popover content. If you want to manage opening and closing the popover using the is-open attribute, use popover-trigger="none".
I have a Bootstrap collapsing div that I've adapted for Angular JS:
<fieldset>
<legend data-toggle="collapse" data-target="#radios" class="data-toggle" collapse>Radio Buttons</legend>
<div id="radios" class="panel-collapse collapse">
<!-- add class "collapse" to start out closed -->
<div class="panel-body">
...stuff...
</div>
</div>
</fieldset>
Where You set the class collapse on the panel to have it start out closed (as here) or omit it to have it start open.
I've written this directive to toggle the class of the item being clicked, to display an "open" or "closed" icon:
'use strict';
angular.module('designSystemApp')
.directive('collapse', function() {
return {
restrict: 'A',
link: function postLink(scope, element, attrs) {
element.on({
click: function(e) {
element.toggleClass('open');
}
});
}
}
});
It works great like this, when it start of closed and toggles open and closed.
Since the BS way is to set the class on the child object (panel) I'm not sure how to have that affect the Angular trigger object, so changing that class will set the state/class to "open" at the start.
In other words, if I remove the class the div starts open but the legend does not have the open class so the icon is "closed". I'm trying to avoid having to set two things; lookin for an easy way to set the default as open or closed.
Although not directly answering, but providing you with a possible workaround/solution to your question I am doing a similar task using the angular-bootstrap library for this and other bootstrap controls. The library can be found here
An example of the collapse plugin adapted for your use case:
<fieldset>
<legend ng-click="isCollapsed = !isCollapsed">Radio Buttons</legend>
<div id="radios" class="panel-collapse" collapse="isCollapsed">
<div class="panel-body">
...stuff...
</div>
</div>
</fieldset>
Then in your angular directive or controller you could set isCollapsed = true or false depending whether you want it to start open or closed by default.
I am using bootstrap popover with angular template. I am including the angular template with ng-include directive. The template consists of a popover. I am trying to bring that popover through a angular directive but it's not getting displayed.
angular directive
angular.module('app').directive('popover', function () {
return {
link: function (scope, element, attrs) {
$("[data-toggle=popover]").popover();
}
};
});
The following html template is being included from another html page with ng-include directive.
<div>
<span class="title">
<button title="" data-original-title="" class="popper btn-link" popover data-toggle="popover">4 Peoples</button>
<div class="popper-content hide">
<p>
<span> Alex</span>
</p>
<p>
<span>Francis</span>
</p>
<p>
<span>Mark</span>
</p>
<p>
<span>Peter</span>
</p>
</div>
</span>
</div>
But, if I click the button the popover is not getting displayed.
First, from my own experience I recommend using angular-bootstrap for things in that scope.
Second, if you really want it to work, make sure the bootstrap scripts are correctly loaded. Then try to listen to the click event with ng-click on the button and trigger the popover on it.
Here is the code to achieve what you want.
scope.popover = function() {
$("[data-toggle=popover]").popover({
html: true,
content: $('.popper-content').html(),
placement: attrs.popoverPlacement
});
};
Here is the html:
<button type="button" popover-placement="bottom" class="popper btn-link" popover ng-click="popover()" data-toggle="popover">
4 Peoples
</button>
Here is the plunkr :
https://plnkr.co/edit/fBPJ8LfOFGlgcCHvRWSM?p=preview
There are plenty way of achieving what you want. By the way I recommend you to read this :
"Thinking in AngularJS" if I have a jQuery background?
Regards,