We Keep Coding

Angular appending html with directives from within a directive

I'm trying to write a small directive that will append the validation tags and ngMessages dynamically to the input. But I'm having trouble appending the ng-message attribute to the div.
The idea is to have this,
<div validator validations="{json_data containing error messages}">
<input name='fieldName'>
</div>
Turned in to the following according to the provided JSON.
<div validator>
<input required="required"></input>
<div ng-message="fieldName" ng-if="fieldName.$dirty>
<p ng-message="required"> scope.message </p>
</div>
</div>
I've currently managed to get the ng-required appeneded using the answer to this answer. But I can't seem to append the ng-message tag using the same technique. What should be done differently to solve this issue?
The final directive should be able to generate something like this Fiddle
The current version can be found in the Fiddle here the example works as expected until 'scope' is added. But as soon as 'scope' is added, the example stops working.
Update
I've realized that this only occurse when you add a local scope. This error doesn't occure when using the global scope and accessing the variable using scope.$eval(attrs.message)

Are they any syntax highlighting plugins that will allow you to embed an ignorable html element into a snippet?

I am trying to make dynamic code examples for our api that can be constructed from from input html elements.
A paired down example looks like this, I give the user an input to name the device they would like to create.
<input class="observable-input" data-key="deviceName" type="text" value="deviceKey" />
I would then like that input to update code examples (replacing the device name in the example with the one the user inputs).
<code lang="python">
device = { "name": "<span data-observeKey="deviceName">Name</span>" }
client.createDevicewrite(device)
</code>
I have all of the code setup for observing a change in the input and updating the code examples, this works great. All of the syntax highlighters I have looked at, usually chop the snippet up and rerender the example wrapped with its own html (for styling). Is there an option/configurable way to get a syntax highlighter to not strip the these tags, or is there a different approach I should be looking at for preserving the syntax highlighting and still supporting dynamic updates without having to do a full text search of each snippet's rendered tags.
The example output of the pygment (current syntax highlighter I'm using).
<li>
<div class="line">
<span class="n">device</span>
<span class="o">=</span>
<span class="n">{</span>
<span class="s">"name"</span>
<span class="p">:</span>
<span class="s">"Name"</span>
<span class="n">}</span>
</div>
</li>

I decided to just go with a brute force approach, it ended up being decently performant, ill leave my code here if anyone is interested in what I did
https://gist.github.com/selecsosi/5d41dae843b9dea4888f
Since i use backbone, lodash, and jquery as my base app frameworks the gist uses those. I have a manager which will push updates from inputs to spans on the page which I use to dynamically update the code examples

how can I read dynamic value in ui in e2e protractor

I'm developing e2e test in protractor. I'm running the test chrome browser.
In UI there is a dynamic field :
<div ng-show="searchResult.count" >
<h4>Search Results: </h4>
<p id="font-weight-500">{{searchResult.count}} Items</p>
<hr>
</div>
I need to take the value of searchResult.count
I tried
element(by.binding('searchResult.count'));
$('[ng-show="searchResult.count"]')
;
I did some change in html and added ng-model='shearchResult.count' in div
<div ng-show="searchResult.count" ng-model="searchResult.count">
then I call
element(by.model("searchResult.count"));
All of them's result is same:
<h4>Search Results: </h4>
<p id="font-weight-500" class="ng-binding"> Items</p>
<hr>
I also tried to use $scope
SearchPage.prototype.getSearchResultNumber=function($scope){
....
var value=$scope.searchResult.count;
....
But I've got the "$scope" is undefined result
Although I can see the number in web browser I cannot read or take in e2e spec in protractor.
How can I get this dynamically generated data?
Can anyone help me to solve this problem?
Thanks

You can workaround it by using getAttribute() to get the value of ng-model attribute:
var div = element(by.model("searchResult.count"));
expect(div.getAttribute('ng-model')).toBe('10'); // 10 is an example

Double curly brace notation not being compiled

I have the following "Angular HTML"
<div class="radio input-l" ng-repeat="carPark in initialPlace.carParks" ng-show="!carPark.isBlueBadgeCarpark || isBlueBadge">
<input type="radio" name="payment" ng-change="updateParkingSpaces(carPark, initialPlace)" ng-model="initialPlace.selectedCarpark" value="{{carPark.carparkID}}" id="carpark-{{carPark.carparkID}}">
<label for="carpark-{{carPark.carparkID}}">
£{{carPark.cost}} - {{carPark.carparkName}}
</label>
</div>
which renders and works fine in FireFox/Chrome/Safari/[insert another decent browser here]
This is a plunker of what I am trying to do, I can't get plunker (even the root site) working on my MSIE so I have no idea if it behaves correctly, but it really is as simple as this
But in MSIE 7/8 I still seem to get "{{carPark.cost}}" rather than the value
everything else seems to work fine, except the {{ ... }} notations
MSIE 7 Error:
[$sce:iequirks] Strict Contextual Escaping does not support Internet Explorer version < 9 in quirks mode. You can fix this by adding the text to the top of your HTML document. See http://docs.angularjs.org/api/ng.$sce for more information.
http://errors.angularjs.org/1.2.3/$sce/iequirks

To fix this I just had to add a reference to JSON3.js. For some reason JSON2.js wouldn't work but JSON3 worked fine, I used cdnjs.com for the cdn

nested CSS counters in IE 7 without lists

I have the following HTML-code-structure (example):
<p paraclass="M">Some Text</p>
<p paraclass="A1">enum 1</p>
<p paraclass="A1">enum 2</p>
<p paraclass="A2">enum 2.1</p>
<p paraclass="A2">enum 2.2</p>
<p paraclass="A1">enum 3</p>
and want it to be rendered like this:
Some Text
1 enum 1
2 enum 2
2.1 enum 2.1
2.2 enum 2.2
3 enum 3
This works great with CSS-pseudotag like:
p[paraclass="A1"]:before{
content:counter(A1);
counter-increment:A1;
counter-reset: A2;
}
Unfortunatly this doesn't work in IE7. What is a good solution for this to work in IE7 without changing the HTML?For a JS solution I have all the information about the counters I need (like the Id's, what counters they reset and what list-style-type they have). Is there a better/easier way? And if not, how can I use counterstyles like "lower-roman" without implementing them myself? Note: jQuery 1.6.2 can be used.

First of all, your HTML is not valid. The paraclass attribute must be renamed to data-paraclass in case you're developing with HTML 5, or add a namespace if you're developing with XHTML.
Second, the <p> element is not thought to be displayed as a list. Therefore I'd like to encourage you to use the <ol> element, since it is designed especially for this purpose and supported by all browsers.