I use AngularJS tooltip and it works fine. Now I will have a condition wheather tooltip should be shown or not. Is there any attribute to do this?
<div data-popover-template="'chartTimePopoverTemplate.html'" data-popover-trigger="mouseenter" data-ng-repeat="scheduleIntervalContainer in ...
<script type="text/ng-template" id="chartTimePopoverTemplate.html">
<div">
{{scheduleIntervalContainer.startTime}} - {{scheduleIntervalContainer.endTime}}
</div>
</script>
you can use
popover-is-open="booleanValue"
as shown in the docs here.
Related
I try to created dropdown with checkbox using angular demo, but its not closing if we click outside of select.
can anybody help?
Please find my fiddle:
http://jsfiddle.net/jab4raoq/120/
HTML:
Below is my html code, please note above fiddle to see the full angular code
<div ng-app="myApp" ng-controller="AppCtrl">
<dropdown-multiselect dropdown-title="Select Filter" pre-selected="member.states" model="selected_items" options="states" tabindex="2"></dropdown-multiselect>
<div>
focused: {{focused}}
</div>
</div>
I have created discussion forum application in angularjs. Once the user clicked the reply button on the post, I want to show the editor which is in the separate html file. How can I include that template on clicking the ng-click under that specific post.
How about a combination of ng-include with ng-if?
If you want to inject a template based on a certain condition, you can do it like this:
<div ng-include="'template.html'" ng-if="yourCondition"> </div>
where template.html is your filename and yourCondition should be an boolean expression.
Here is a plnkr to demonstrate: http://plnkr.co/edit/m50nKigoOWYwuczBIQdQ?p=preview
As suggested above we can use combination of ng-if and ng-include to achieve require functionality :
<html ng-app="includeApp">
<head>
<script type ="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<script src="AppController.js"></script>
</head>
<body ng-controller="AppCtrl">
<button ng-click="injectReply()">Include Reply</button>
<div ng-include="'reply.html'" ng-if="isReplyIncluded"></div>
</body>
</html>
Now code containing AppController.js :
angular.module('includeApp',[])
.controller('AppCtrl',['$scope',function($scope){
$scope.isReplyIncluded=false;
$scope.injectReply= function (){
//add reply.html by making this variable true
$scope.isReplyIncluded=true;
}
}]);
Reply.html
<div>
You can add your editor html content here
</div>
Anyone knows how to customize the layout of ngTagsInput autocomplete?
<tags-input ng-model="tags" placeholder="neues Tag">
<-- Customize this autocomplete layout --->
<auto-complete source="loadTags($query)"></auto-complete>
</tags-input>
I want to embed something like this template in the autocomple result
<div> {{ Category }} : {{ TagName }} </div>
There is a built in support for custom autoComplete template now.
you can change the default autocomplete template by setting the template option:
<auto-complete source="loadTags($query)" template="/path/custom-template"></auto-complete>
or
<auto-complete source="loadTags($query)" template="my-custom-template"></auto-complete>
If using inline template you can specify like this :
<script type="text/ng-template" id="my-custom-template">
...
</script>
Official documentation is here.
http://mbenford.github.io/ngTagsInput/documentation/guides/custom-templates
You have three options:
Override the $templateCache by physically having the files on the folder, which for this library would be:
$templateCache.put('ngTagsInput/tags-input.html', ' ... '
$templateCache.put('ngTagsInput/auto-complete.html', ' ... '
Use a template script on your html:
<script id="ngTagsInput/tags-input.html" type="text/ng-template">
<div>Whatever here</div>
</script>
Inject the $templateCache service and override the template on your module
angular.module('myApp',[])
.run(['$templateCache', function($templateCache){
$templateCache.put('ngTagsInput/tags-input.html',
<div>Whatever here</div>
);
}]);
Currently there's no built-in support for that, but you can always get the source code and customize it to your needs.
There is an open issue for that feature, though. You can keep track of its progress here.
Custom templates are now supported. Irfad Ibrahim's answer provides additional info.
I have something like this:
http://plnkr.co/edit/CoDdWWQz8jPPM4q1mhC5?p=preview
What I would like to do is closing the popover window after clicking somewhere outside. I know that there were similar questions but I would like to know how to do that in Angular. Problem is, my popover is located inside script tag.
<script type="text/ng-template" id="templateId.html">
This is the content of the template {{name}}
</script>
In bootstrap's documentation they have an example of a 'dismissable' popover.
The trick is to add trigger: 'focus' to your popover options. You then need to change your element to a 'focusable' element (in this example i have used a button)
Here is my fork of your example.
PS. it is worth mentioning that not all elements are natively 'focusable'. You can make sure that an element can become focusable, but adding the attribute tabindex (eg. tabindex="-1").
Looks like I have found an answer to my question. All we need to do is to apply this solution: How to dismiss a Twitter Bootstrap popover by clicking outside? to directive responsible for showing popover. What's more, we need to add data-toggle="popover" to our button.
And, surprisingly, it works very well.
If you want it to work seamlessly on any kind of elements without having to use any external code nor weird things, all you have to do is add this 2 attributes to your markup: tabindex="0" to make the element focusable, and popover-trigger="focus" to make it dismiss the popup once you click off.
Example with <i> tag which is not focusable:
<i popover-html="someModelWhichContainsMarkup" popover-trigger="focus"
tabindex="0" class="fa fa-question-circle"></i>
You can use following code:
<div ng-app="Module">
<div ng-controller="formController">
<button uib-popover-template="dynamicPopover.templateUrl" popover-trigger="focus" popover-placement="left" type="button" class="btn btn-default">Popover With Template</button>
<script type="text/ng-template" id="myPopoverTemplate.html">
<div>
<span>prasad!!</span>
</div>
</script>
</div>
</div>
In Script :
<script type="text/javascript">
var app = angular.module("Module", ['ui.bootstrap']);
app.controller("formController", ['$scope', function ($scope) {
$scope.dynamicPopover = {
templateUrl: 'myPopoverTemplate.html'
};
}]);
</script>
Works for me, add this attribute to the tag which is calling/opening the popup, DON'T MISS THE SINGLE QUOTES AROUND outsideClick
popover-trigger="'outsideClick'"
This opens only one popover and closes upon clicking outside of popover
popover-trigger="outsideClick"
I am using ng-show #animation.
index.html: -
<body>
<div ng-view></div>
</body>
templateURL contains:-
<button ng-init='shw=false', ng-click='shw=!shw;', class='share'> press me </button>
<div ng-init='shw=false', ng-show='shw', class='animate-show'>
<h1> this is animation showing </h1>
<h2> even in the begining which it should not </h2>
</div>
In the above code the templateURL file should not show or slide up when page loads.
Please view the following two plunkrs.
This is expected behavior
This is the behavior we get when using ngAnimate and ngRoute together.
You can use ng-if in place of ng-show to get your desired animation.
You can checkout this plunker I created using your sample code.
http://plnkr.co/edit/ZzxrwzecaX2yrEcSwvEn?p=preview