I'm trying to build a directive which will display a kendo window with a kendo tab strip in its body content.
It's a component I need to be reusable since I use it a lot in my web app.
Here is the flat html representation that I want to turn into a directive
<div style="padding:20px;" kendo-window="test" id="test" k-title="hello" k-options="popupOptions">
<div kendo-tab-strip k-content-urls="[ null, null]">
<!-- tab list -->
<ul>
<li class="k-state-active">View</li>
<li>Edit</li>
</ul>
<div style="padding: 1em">
This is the view tab
</div>
<div style="padding: 1em">
This is the edit tab
</div>
</div>
</div>
1) First step is creating the directive that wraps the kendo popup and this si where I'm having an issue
So basically, my directive includes the kendo-window widget in its template and has transclude="true", since the content of the popup will different each time.
It seems "transclude" and "scope" cause some issues.
Please have a look : http://plnkr.co/edit/c7qoKlh75s8aS7fazYSo
Related
I am working on ionic project, where I need to use single modal view & conditionally call controller for it.
I am trying to do like following -
<div ng-if="!isEditMode" ng-controller="Controller1">
<div ng-if="isEditMode" ng-controller="Controller2">
<ion-content>
<!-- My view code -->
</ion-content>
</div>
</div>
here, both controller are get called(can see console in controller). but html page not get rendered just white screen appear.
If I remove controller2 then it works fine with just one controller.
I have a directive which uses three different templates:
http://jsfiddle.net/edwardtanguay/pLrkya7r/4
These templates each have a panel and I want them to include a header template which is the same for each of them, like this:
<script type="text/ng-template" id="itemMenuTemplateUndefined">
<div class = "panel panel-default" >
<div ng-include="'itemMenuTemplatePanelHeading'"></div>
<div class="panel-body">
<div>Age: {{item.age}}</div>
</div >
</div>
</script>
The included template looks like this:
<script type="text/ng-template" id="itemMenuTemplatePanelHeading">
<div class="panel-heading">{{item.firstName}} <b>{{item.lastName}}</b> (PROBLEM INCLUDED BUT NO COLOR)</div>
</script>
The problem is that although it includes the scope variable values and HTML, it doesn't seem to have the same HTML structure which causes e.g. the panel header color not to display.
How can I get this example to work so that it has the same HTML structure as without ng-include so that Bootstrap continues to work?
The problem is that the bootstrap css is very specific in targeting the panel heading as a direct child of the panel using selectors like .panel-warning>.panel-heading.
The extra <div> for the ng-include breaks this child relationship making it
<div class="panel">
<div ng-include>
<div class="panel-heading>
Some possible choices:
Add appropriate classes to the ng-include div
Copy the css rules and replace the > in selector with a space
Use your own directive instead of ng-include and within the options
set replace:true
I'm trying to show the user a list of items inside of a popover that is all inside an ng-repeat. I'm using angularjs as well as the ui-bootstrap package (http://angular-ui.github.io/bootstrap/).
HTML
<div ng-repeat='session in sessions'>
<p popover="{{session.items}}">view items</p>
</div>
This will show the array session.items for each session, which contains the information I want to show. However, this shows the brackets of the array as well.
Does anyone know a clean way to do this?
any help would be appreciated, thanks in advance
From ui-bootstrap site you can read
uib-popover - Takes text only and will escape any HTML provided for the popover body.
So if you provide session.items you will get string '[my array content]'. In my opinion you need to use uib-popover-template where your template would be like
<div ng-repeat='session in sessions'>
<p uib-popover-template="'urlToMyTemplateHere'">view items</p>
</div>
------ Template
<div ng-repeat="item in session.items" ng-bind="item"></div>
uib-popover-template takes an url to the template so you have to create file for it to be fetched or try this approach ( I don't really like it but just for testing )
<div ng-repeat='session in sessions'>
<p uib-popover-template="'iamabadapproachtemplate.html'">view items</p>
</div>
<script type="text/ng-template" id="iamabadapproachtemplate.html">
<div ng-repeat="item in session.items" ng-bind="item"></div>
</script>
I am trying to add a switch to my partial view, it works as long as I am not switching the views using the ng-include. any idea why its breaking?
example in the plnkr code
basically this is what i am doing there:
<div ng-app="myApp">
<div ng-controller="RootController">
{{MyText}} : {{subview}}
<button ng-click="SelectAdmin()">Administration</button>
<button ng-click="SelectOperation()">Operations[Breaks!]</button>
<br/>
<div ng-switch="subview">
<div ng-switch-when="operations">
<div ng-include src="'./_partial.htm'"></div>
</div>
<div ng-switch-when="administration">
SHOWING :{{subview}}
<div class="make-switch switch-large">
<input type="checkbox" checked="" />
</div>
</div>
</div>
</div>
</div>
EDIT 1
To describe the issue a bit more:
When I start the page, I show the div that is not in the partial. i,e, set the subview = admionistrator and see an views as below.
now when i click on the "Operations" button i switch the view but use ng-include to load the partial view. and the partial view is actually showing the same content, but the view is messed up as seen in the image below.
Now even when i switch back to the earlier view by clicking on the Administrator button the make-switch is still broken.
I'm quite happy with the Angular UI Bootstrap Accordion, but I encountered a problem when creating a Accordion Group with no body. The Accordion will always create an empty body and I couldn't find a way to prevent this. Is there a way to prevent the creation of the accordion body or can the accordion group be created in a way that it is not expandable?
Plunker with example
Accordion Directive
The accordion directive builds on top of the collapse directive to
provide a list of items, with collapsible bodies that are collapsed or
expanded by clicking on the item's header.
As I stated in the comment, just use the Collapse directive and style it like an accordion.
Update:
Not styled to perfection but try this
HTML
<div ng-controller="CollapseDemoCtrl">
<div class="accordion-group" ng-click="isCollapsed = !isCollapsed">
<div class="accordion-heading">
<a class="accordion-toggle">Group with body</a>
</div>
</div>
<div collapse="!isCollapsed" class="collapse">
<div class="well well-large">Some content</div>
</div>
</div>
Controller
function CollapseDemoCtrl($scope) {
$scope.isCollapsed = false;
}
plunkr