<uib-alert ng-repeat= "alert in ConfigurationAlerts" close="closeAlert($index)"> {{alert.msg}} </uib-alert>
var eWiggle = angular.module('eWiggleApp',['ui.router', 'ngAnimate', 'ui.bootstrap','blockUI','ngCookies']);
As of version 2.0 the uib-alert directive was changed to an attribute rather than an element, meaning you need to attach it to a div. You haven't specified a class either, which is what determines the colour scheme of the alert. Your example should look like this:
<div uib-alert ng-class="'alert-success'" ng-repeat="alert in ConfigurationAlerts" close="closeAlert($index)"> {{alert.msg}} </div>
The documentation has an example which is worth looking at.
Related
I've got this template:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12" ng-repeat="product in ad.products">
<a href="{{product.link}}">
<h1>{{product.title}}</h1>
<img src="{{product.src}}">
<p>{{product.description}}</p>
<h5>{{product.price}}</h5>
</a>
</div>
</div>
</div>
From my controller I need to evaluate this template so that it checks how many products that have been selected and then it interpolates each product's values into the template. After that is done I also need to remove the ng-repeat so it doesn't fire an error in the external pages that will use this where angular is not present. However I'd figure that I'd just use a regex to look up the ng-repeat and everything in the expression and then remove it.
I've been looking at $interpolate and $compile but I can't figure out how to work with them from my controller so that it does what I want. This is because when I use these on my template and then console log the template value it's a function with a whole lot of nonsense in it.
So doing this:
ad.html = $compile(res.data, $scope);
Generates something like this:
function(b,c,d){rb(b,"scope");e&&e.needsNewScope&&(b=b.$parent.$new());d=d||{};var h=d.parentBoundTranscludeFn,k=d.transcludeControllers;d=d.futureParentElement;h&&h.$$boundTransclude&&(h=h.$$boundTr…
Can someone shed some light on how to achieve what I want?
Your are using $compile function in wrong way, you should call $compile(html) function by passing $scope parameter like below.
var compiledDOM = $compile(res.data)($scope);//then do append this DOM to wherever you want
ad.html = compiledDOM.html(); //but this HTML would not make angular binding working.
I use the verions 0.14.2 of angular-ui-bootstrap. I was unable to display line returns in the popover.
I use the popover-html directive, and a string such as
Limite inférieure<br>Limite supérieure
It gives the following error :
Lexer Error: Unexpected next character at columns 41-41 [é] in expression [<div>Approchant des limites<br>Limite supérieure: 34:12<br>Limite inférieure: -34:12</div>].
I tried wrapping my string in a $sce.trustAsHtml call, but it didn't change a thing.
Here is a plunker
http://plnkr.co/edit/3JSly1anPBUiGyqBcsD1
Works for me using $sce.trustAsHtml as below.
Note: trustAsHtml tells Angular to trust that the HTML is safe, so should only be used if you do trust the HTML, i.e. its not user-supplied.
JS:
$scope.popoverContent = $sce.trustAsHtml('Line 1<br>Line2');
HTML:
<button popover-placement="right" uib-popover-html="popoverContent" type="button" class="btn btn-default">Popover</button>
Updated Plunker
Or if your content is dynamic and you need a function:
JS:
$scope.input = 'Line 1<br/>Line 2';
var trusted = {};
$scope.getPopoverContent = function(content) {
return trusted[content] || (trusted[content] = $sce.trustAsHtml(content));
}
HTML:
<button popover-placement="right" uib-popover-html="getPopoverContent(input)" type="button" class="btn btn-default">Popover</button>
Plunker
(The reason for caching the value returned by trustAsHtml is that trustAsHtml always returns a new object so can cause an infinite $digest loop)
The accepted approach can easily lead to a cross-site scripting vulnerability in you application. You should really only use $sce.trustAsHtml if you explicitly trust the content that you want to display. The angular-bootstrap documentation also hints at that:
The user is responsible for ensuring the content is safe to put into the DOM!
An alternative and safer approach is to use uib-popover-template with a simple template in combination with ng-bind-html that automatically uses $sanitize to sanitize the HTML.
HTML
<p uib-popover-template="myPopoverTemplateUrl"
popover-trigger="mouseenter"
popover-placement="top"
popover-append-to-body="true">
Show a Popover on Hover
</p>
<script type="text/ng-template" id="myPopoverTemplate.html">
<div>
<p ng-bind-html="popoverContent"></p>
</div>
</script>
JS
$scope.myPopoverTemplateUrl = "myPopoverTemplate.html";
$scope.popoverContent = "This is HTML <b> And will be sanitized."
You also need to make sure to declare ngSanitize in your app and to include the angular-sanitize.js script. Please take a look at the updated plunker for reference.
Updated Plunker
I am having trouble using javascript to get and set the value of ons-checkbox elements. I have read through the docs and am stuck. Any advice or direction would be much appreciated.
Sean
If you want to use pure JavaScript for your OnsenUI app, I suggest you use Onsen CSS component. In other words, you will have OnsenUI style for your app by just adding the css of the Onsen CSS component you want. Then, use JavaScript to access those components just like how you do it with any HTML components. For example in this case a checkedbox. Please see the example here about how to set/get the value as well as check status.
However, if you still wanna use OnsenUI's elements. There are 2 ways to do it:
1. Directly in the html page:
<!--Set the value directly in the tag-->
<section style="padding: 10px;">
<ons-checkbox
ng-model="answer"
ng-true-value="YES"
ng-false-value="NO">
Yes or No?
</ons-checkbox>
<br>
<!--Get the value directly-->
<span>{{answer}}</span>
</section>
2. Via AngularJS
page.html
<ons-page class="center" ng-controller="Test_Ctrl">
<h1>Checkbox Value</h1>
<section style="padding: 10px;">
<ons-checkbox ng-model="answer">
Yes or No?
</ons-checkbox>
<br>
<!--Get the value directly-->
<span>{{answer}}</span>
</section>
<!--Get the value by the script-->
<ons-button ng-click="check()">Result</ons-button>
</ons-page>
app.js
angular.module('myApp', ['onsen.directives']);
function Test_Ctrl($scope) {
$scope.check = function (){
if($scope.answer) //If the checkbox is checked.
$scope.answer="YES";
else //If the checkbox is unchecked.
$scope.answer = "NO";
alert($scope.answer);
}
}
I'm using Bootstrap and AngularJS to dynamically create clickable tabs in HTML. More specifically, I'm using the ng-switch and ng-switch-when directives to control which tab's content is displayed at any given time.
PLEASE NOTE: Below you'll notice I use a controller for DOM manipulation. I realize the "AngularJS way" to perform DOM manipulation is with directives (and not controllers). I'm not one to deliberately violate good coding practices, but since I'm trying to understand this exact issue I've stumbled across while learning about controllers and directives, I'm asking you to only consider using a controller for now since that's what I believe may be contributing to the issue.
If you keep reading you'll notice I've already found a directive-based solution (i.e., the "AngularJS way"), but I'm specifically asking about the issue that occurs when using a controller and ng-switch-when.
The Problem:
The issue I'm facing is as follows. When I append div tags (containing a ng-switch-when directive) onto a container, and then compile these tags using $compile, somehow the content of each tag using ng-switch-when becomes duplicated. To keep this question from becoming too long, I've placed the idea behind what the code's expected behavior is in the comments of the first JSFiddle below, which demonstrates the issue.
JSFiddle: What I have now -- Uses controller for DOM manipulation ("non-AngularJS way"), results in unexpected duplication of tags using ng-switch-when.
An in-depth description of how to reproduce the duplication is as follows. Upon creating a new tab, it appears that the previously clicked tab's content (within the div containing ng-switch-when) is duplicated. You can see this happen by loading the above JSFiddle, right-clicking the Default text, selecting Inspect element, and then pressing Analysis > Create Tab in the tabbed pane. You'll see there are now two div tags with ng-switch-when="Default" instead of just one. If you continue to create new tabs, this pattern continues for view1, view2, and so on. Alternatively, just click Analysis > Create Tab 5 times and then look at the duplicates in Tabs 1-4. Either way, you'll see the previously selected tab's contents are doubled whenever a new tab is created.
Frustrated by this unexpected behavior, I went ahead and implemented a directive-based solution using AngularUI's Bootstrap components, which creates custom directives for tab components, to gain the desired functionality.
JSFiddle: What I want to happen in the above JSFiddle -- Uses directives for DOM manipulation ("AngularJS way").
However, as I've mentioned, I want to know why my first JSFiddle is not working. See below for formal question.
Points to consider:
The issue may be related to scope, the order the scripts are loaded, or possibly a logic error.
Perhaps it's something AngularJS simply cannot do. I'm aware that compound transclusion no longer works as of v1.2, and this issue may be related.
So my question is as follows:
Why is this duplication occurring? Is there a way to prevent/workaround the duplicates from being created? Remember, I wouldn't use this in practice, I'm just curious if this issue can be solved at all.
PLEASE NOTE: I am not looking to resolve this using jQuery, such as this jQuery solution. Although I'm aware AngularJS uses a lighter version of jQuery called jqLite under the hood, I'm looking for a "pure AngularJS" solution.
HTML:
<!-- Include CDNs (see JSFiddle above) -->
<!-- Wrap in HTML tags, include DOCTYPE -->
<body ng-app="myApp">
<div class="panel panel-default" ng-controller="myCtrl">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active">
<a class="h4">My App</a>
</li>
<li class="dropdown">
<a href="" class="dropdown-toggle h4" data-toggle="dropdown">
Analysis
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<button id="createTabLink" class="h4" ng-click="createTabClick()">Create Tab</button>
</li>
</ul>
</li>
</ul>
</div>
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-heading">
<ul id="createTabDiv" class="nav nav-tabs"></ul>
</div>
<div class="panel-body">
<div id="viewWrapper" ng-switch="" on="viewSelected">
<div id="Default" ng-switch-when="Default">Default</div>
</div>
</div>
</div>
</div>
</div>
</body>
JS:
angular.module('myApp', []);
function myCtrl($scope, $compile) {
$scope.count = 0;
$scope.viewSelected = "Default";
$scope.tabClick = function($event) {
var tab = $event.target;
var viewName = tab.getAttribute("value");
$scope.viewSelected = viewName;
};
$scope.createTabClick = function() {
$scope.count++;
var viewName = "view" + $scope.count;
var createTabDiv = angular.element(document.querySelector('#createTabDiv'));
var viewWrapper = angular.element(document.querySelector('#viewWrapper'));
var $comp1 = createTabDiv.append('<li class="active"><a class="h4" value="' + viewName + '" ng-click="tabClick($event)">Tab ' + $scope.count + '</a></li>');
$compile($comp1)($scope);
var $comp2 = viewWrapper.append('<div id="' + viewName + '" ng-switch-when="' + viewName + '">' + viewName + '</div>');
$compile($comp2)($scope);
$scope.viewSelected = viewName;
};
}
Is there something like angularjs directive's transclude attribute in polymer? Something what allows me to include some elements to a specific place in template?
I would like to achieve something like following:
<my-header title="My title">
<my-header-item name="Item 1"></my-header-item>
<my-header-item name="Item 2"></my-header-item>
</my-header>
which might be expressed:
<h1>My title</h1> <!-- "My title" given by my-header's title attribute -->
<ul>
<li>Item 1 <!-- given by my-header-item -->
<li>Item 2
</ul>
I am not sure if this is a task for polymer or if this is a typical way to use polymer. I am asking, because I started to like polymer and I would like to keep idiomatic thinking.
In Shadow DOM land, this is called distribution. To distribute light DOM nodes into the shadow dom, you use <content> insertion points.
http://www.polymer-project.org/platform/shadow-dom.html#shadow-dom-subtrees
It's quite literally a way to render nodes from light dom into placeholders in the shadow dom.
If you want to do tricky things with the my-header/my-header-item title/name attributes, you can do something like this:
<polymer-element name="my-header">
<template>
<ul>
<template repeat="{{item in items}}">
<li>{{item.name}}</li>
</template>
</ul>
<content id="c" select="my-header-item"></content>
</template>
<script>
Polymer('my-header', {
domReady: function() {
this.items = [].slice.call(this.$.c.getDistributedNodes());
}
});
</script>
</polymer-element>
Demo: http://jsbin.com/hupuwoma/1/edit
I have a more full-fledged tabs demo does this setup over on https://github.com/ebidel/polymer-experiments/blob/master/polymer-and-angular/together/elements/wc-tabs.html.
While admittedly I'm also new to polymer - I think I can answer this.
You should be able to substitute the value of an attribute into the template using the double-mustache syntax e.g.
<h1>{{title}}</h1>
See http://www.polymer-project.org/docs/start/creatingelements.html#publishing
In addition to this you can also substitute the content of a tag. For example if instead of using the "name" attribute in your my-header-item tag you instead had something like this...
<my-header-item>Item 1</my-header-item>
then you could substitute "Item 1" like this:
<li><content></content></li>
See http://www.polymer-project.org/platform/shadow-dom.html for this usage