Consider this code snippet:
<div id="accordion">
<h3>TEST</h3>
<p>Lorem ipsum</p>
<script>some JS code </script>
</div>
Once accordion is initialised, JS code is becoming a part of output. I can see that is being added some accordion attributes. How do I make accordion to ignore as part of visible data and keep it as a script instead?
My code is auto-generating each accordion panel and some JS functionality is built as part of it, hence the problem.
Thanks,
Rudolf
Why is it one comes up with an answer right posting on the forum?
Anyway, my solution is:
<div id="accordion">
<h3>TEST</h3>
<p>Lorem ipsum</p>
<script class="ignore">some JS code </script>
</div>
<script>
$( function() {
$( "#accordion" ).accordion({
header:'h3:not(.ignore)'
});
Not sure if this is a good way, but seem to work.
I am open to suggestions on a better way to implement what I need.
Rudolf
Related
I'm having trouble dynamically capturing form inputs in angular. I have a form that takes several inputs for a resource. Each resource has many sections, and each section has many links. I've been able to get the functionality to work for a user to dynamically add/remove sections and links, but when it comes to actually capturing that with ng-model I can't seem to get it.
Based on this stackoverflow post, I thought I could do something like the first answer, ng-model="newResourceForm.sections[section.title]", but that doesn't seem to be working for me (it says that it is undefined)
Here is a link to a plunkr that I made for it:
Looks like the problem in your code is that you are binding your variables to
newResourceForm.sections
but you are creating new sections inside an array named sections without a title property.
Using ng-model="newResourceForm.sections[section.title]" works but section.title is undefined. The result is your newResourceForm.sections object contains just one section named undefined no matter how many objects you have in your sections array.
The way you're adding/editing sections is a little off. It's hard to say without looking at your controller code, but I think this is part of the issue:
<div ng-repeat="section in sections" class="form-group mt">
and it should look more like
<div ng-repeat="section in resource.sections" class="form-group mt">
I made a really minimal working version of what I think you were going for, feel free to try it out! (you just have to change the location of angular.min.js)
<html>
<head>
<script src="static/angular.min.js"></script>
<script>
angular.module('app', [])
.controller('resourseCtrl', resourseCtrl);
function resourseCtrl() {
this.resource = {'sections': []};
console.log('controller started');
this.addSection = function() {
this.resource.sections.push({});
};
this.removeSection = function() {
this.resource.sections.splice(this.resource.sections.length - 1, 1);
};
}
</script>
</head>
<body ng-app="app">
<div ng-controller="resourseCtrl as resourseCtrl">
<button ng-click="resourseCtrl.addSection()">add section</button>
<button ng-click="resourseCtrl.removeSection()">remove section</button>
<div ng-repeat="section in resourseCtrl.resource.sections">
<p>name:<input text ng-model="section.name"></input></p>
<p>title:<input text ng-model="section.title"></input></p>
<p>description:<input text ng-model="section.description"></input></p>
</div>
{{ resourseCtrl.resource }}
</div>
</body>
</html>
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'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 think some sample code can explain my purpose.
Some html code with angular:
<div ng-init="buttons=['add','edit','delete']">
<div show-result-as-text>
<button ng-repeat="button in buttons">{{button}}</button>
</div>
</div>
You can see there is a custom directive "show-result-as-text" which I want to define. It should render the inner html code with angular directives, then show them as text.
The final html should be:
<div ng-init="buttons=['add','edit','delete']">
<div show-result-as-text>
<button>add</button>
<button>edit</button>
<button>delete</button>
</div>
</div>
And when the buttons value changes, the escaped html should also be changed.
I've tried to write one myself, but failed after 2 hours of work.
UPDATE
A live demo: http://plnkr.co/edit/fpqeTJefd6ZwVFEbB1cw
The closest thing I could think of is exemplified here: http://jsfiddle.net/bmleite/5tRzM/
Basically it consists in hiding the src element and append a new element that will contain the outerHTML of each src child.
Note: I don't like the solution but it works, so I decided to share it...
I am trying out Backbone.Marionette and I am confused as to why my Layouts and ItemViews keep generating extra divs.
example is in Coffee btw.
AppLayout = Backbone.Marionette.Layout.extend
template: "#my-layout",
regions:
menu: "#menu",
content: "#content"
MyMenuView = Backbone.Marionette.ItemView.extend
template: '#project_wiz_nav_template'
MyContentView = Backbone.Marionette.ItemView.extend
template: '#project_setup_template'
MyApp = new Backbone.Marionette.Application()
MyApp.addRegions
mainRegion: '#project'
MyApp.addInitializer ->
layout = new AppLayout()
MyApp.mainRegion.show(layout)
layout.menu.show(new MyMenuView())
layout.content.show(new MyContentView())
MyApp.start()
This is what index.html contains:
<div id='project'></div>
<script type='text/template' id='project_wiz_nav_template'> <h2>HI</h2> </script>
<script type='text/template' id='project_setup_template'> <h2>WORLD</h2> </script>
<script id="my-layout" type="text/template">
<h2>Hello!</h2>
<div id="menu"></div>
<div id="content"></div>
</script>
This is what it produces:
<div id="project">
<div>
<h2>Hello!</h2>
<div id="menu">
<div>
<h2>HI</h2>
</div>
</div>
<div id="content">
<div>
<h2>WORLD</h2>
</div>
</div>
</div>
</div>
As you can see, it keeps generating extra divs for the views and the layouts. I've tried adding el: '#menu' and el: '#content' to no avail.
This is not because of Marionette. Backbone generates a <div> class for you by default. You can set the tag via the tagName attribute. See comments on the question for duplicates of this.
A hacky workaround, but jQuery's closest() actually did the job for me. Rather than using the returned myView.el directly, I'm using $(myView.el).closest("div").html() -- as I said, hacky, but as a short-term fix it's working.
I was tinkering with this tutorial: http://davidsulc.com/blog/2013/02/03/tutorial-nested-views-using-backbone-marionettes-compositeview/comment-page-1/#comment-3801, which takes a nested model and creates an accordion view using Bootstrap. I wanted to do the same with his starting point, only using the jQueryUI accordion widget, which is the reason I needed an unwrapped view coming back -- hence the filtering with closest().
Other than adding the jqueryUI links and changing the returned HTML as delineated above, it's working pretty well: http://dartsleague.parentleafarm.com/superheroes/
Specify your el property. I think that will fix it:
http://documentcloud.github.com/backbone/#View-el