I would like to add a 'ng-click' to an element that ui-bootstrap renders from the accordion directive.
I am using angular 1.5, so there are a lot of solutions out there but they dont work for angular 1.5.
If I am correct you can override the template with your own template and put ng-click on the element in the template.
template-url (Default: template/accordion/accordion.html) - Add the ability to override the template used on the component.
Related
I am using UI Bootstrap's typeahead directive, and added my own popup template via typeahead-popup-template-url. In that template, I'd like to access scope variables from the parent template (i.e. the one in which I've used the typeahead directive). Is this possible?
Here's a (broken) example of what I'm trying to do ("hello" should be present in the dropdown): http://plnkr.co/edit/ITT1SdRfUWeeN6n3aMqu?p=preview
I'd like to do this WITHOUT modifying the typeahead directive. I don't want to muck around in third party (uib) code if there's a more elegant solution.
In your template, you need to reference the $parent scope. Change:
This should say "hello": {{hello}}</h1>
To:
This should say "hello": {{$parent.hello}}</h1>
Bootstrap, jquery ui, kendoui, yui etc
Isn't that a bit much of frameworks together O.o
Anyway this post might help: How to access parent scope from within a custom directive *with own scope* in AngularJS?
I am trying to add a kendo tooltip with some html template. In the example mentioned in the link:
http://demos.telerik.com/kendo-ui/tooltip/angular
How would i have a template mentioned in <script> tag added as part of k-content? I have tooltip content bound from view model and the content is dynamic. The content has html tags as well.So how can i bind the template using html element attibutes only.
Thanks.
You can use angular directive to create a template, then use it as k-content.
I have an AngularJs template that I would like to re-use with my Kendo Multiselect Item Template and Tag Template.
Is there any way to do this? I'm not sure how to pass data. When I just try to use AngularJS templates, it doesn't work.
Kendo UI templates are just a javascript functions which accepts single parameter - objects to render and return rendered html.
AngularJS template is an HTML fragment which is rendered by $compile service and stored by $templateCache.
It is theretically possible but hard way.
I'm trying to create an animation for an element that is initially hidden by a ng-show="boolDefaultIsFalse" attribute.
When I trigger the boolean to be true then the element is shown, but the animation doesn't play.
This is because the element never gets the ng-show class. It does start with a ng-hide class. But as soon as I show the element then that class is removed and no new ones are added.
Here's a demo of my problem: http://plnkr.co/edit/OkJnxKlp9Ym1mc8CCD05
Anyone any idea how to solve this problem?
Update
I've updated the Plunker.
I added the ng-class directive to add the ng-show class manually to the div. But the animation still doesn't play.
When you include ngAnimate as a dependency of your module:
var app = angular('app', ['ngAnimate']);
Angular will automatically add/remove the following CSS classes when the ng-show/ng-hide directives are applied:
ng-hide-add
ng-hide-add-active
ng-hide-remove
ng-hide-remove-active
To take advantage of this, add your CSS animation styles to these classes.
Here is an Demo
From the angular documents for ng-show:
The element is shown or hidden by removing or adding the ng-hide CSS class onto the element.
If you want to dynamically add / remove a class, you should use ng-class.
I have an application that contains a div with content in it. When I click a button jQuery adds a AngularJs directive to the div. After adding the directive i call scope.$apply(), but this doesn't seem to inform angular about the new directive on the div. Can someone explain to me how I can inform AngularJs about the new directive added with jQuery?
You shouldn't be adding directives to your markup with JQuery. Use Angular for that whenever possible.
That said, if you have to add directives via straight DOM manipulations like that, you'll need to use the $compile provider to compile the element and bind it to a scope before you add it.