Where to declare long ng-style attributes Angularjs - javascript

Say I have the following snippet in an Angular project:
<div ng-app="ExampleApp" ng-controller="ExampleController as controller" ng-init="">
<div ng-style="styleRules={'background-color':'blue', 'width':'100px', 'height':'100px'}"></div>
</div>
If "styleRules" contains a dozen or more CSS rules, should I still keep the entire JSON object in-line, or should it be moved to another file? If it should be moved, to where should I move it?

If it's primarily static as the example you provided, I'd recommend moving it to a $scope.styleRules variable in your script and referencing it in ng-style="styleRules".
Update
Actually if it's static, just put the rules in the style attribute. While not required, you only need to include the dynamic rules in ng-style.

Related

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)

Inject html after review widget loads for schema markup

My webstore uses Kudobuzz for product reviews, but our e-commerce platform (PDG) isn't supported for SEO markup data.
This widget does not support schema markup on it's own, so I want to somehow select the relevant pieces and inject the schema markup to the various divs/spans that make up the widget. One problem is figuring out how to inject code that google can parse, and another is figuring out how to make the actual selectors for this super bloated widget.
Here is a codepin of the widget and some markup data that is already on the site: http://codepen.io/anon/pen/GpddpO
Here is a link to a product page if you want to see how everything works: https://www.asseenontvhot10.com/product/2835/Professional-Leather--Vinyl-Repair-Kit
This is (roughly) the markup I'm trying to add if it helps:
<div itemscope itemtype="http://schema.org/Review">
<div itemprop="reviewBody">Blah Blah it works 5 star</div>
<div itemprop="author" itemscope itemtype="http://schema.org/Person">
Written by: <span itemprop="name">Author</span></div>
<div itemprop="itemReviewed" itemscope itemtype="http://schema.org/Thing">
<span itemprop="name">Stop Snore</span></div>
<div><meta itemprop="datePublished" content="2015-10-07">Date published: 10/07/2015</div>
<div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="worstRating" content="1"><span itemprop="ratingValue">5</span> / <span itemprop="bestRating">5</span> stars</div>
</div>
Theoretically you could write a very small amount of microdata using css :before and :after - with content but it would need all spaces and symbols converted into ISO format, eg.
#name:before { "\003cspan\2002itemprop\0022name\2033"}
#name:after { content: "\2044\003cspan003e"
even spaces need to be substitued with \2002 or an equivalent whitespace
code
should wrap this microdata to your HTML to any element called name:
<span itemprop="name">...</span>
Clearly this can only work if the widget lets you have clear ids or class names for the elements added, and it may be useless you know the type of object reviewed first (eg Book, Movie, since this needs to go at the start in the example I gave - which is incomplete). The code would need to be nested correctly so if you want further help can you edit your question with example HTML for a completed review.
Writing your own JSON-LD script at the top of the page is another option - it would be a different question (if you get stuck) but isn't embedded within the data itself
Edit
it's a good idea to test the css in a separate environment first, eg setup a jsfiddle

How to access inner html element present in actual html via javascript

I need to get the object of second level html element in my page.
<html>
<div id="out">
jasoidjisa
<html>
<head>//This object
<div id="in">
hihisdhi
</div>
</head>
</html>
</div>
<script>
alert(document.getElementsByTagName('html'));
</script>
Help me to access this html element via js
HTML is a reserved tag name and so you can't use it in the manner in which you have used it here. Which particular value from above are you trying to get exactly ? It might make sense to use the <div> tag with a class or I'd to identify it instead. If you specify which value you are specifically looking to get I can write up a theoretical solution.
vsank7787 was totally correct. Maybe you could use iFrames instead of nested html inside a HTML document since html is a reserved keyword.

What happen if I declare the id in CSS is duplicated to id in Javascript?

In case, I already link to CSS with the same id that I use with javascript in the same HTML page. What will happen?
<html>
<head>
<title>My JavaScript page</title>
<script type="text/javascript" src="script.js">
</scrip>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1 id="show">
</h1>
In case, id, show, has declare both in javascript and css. What will happen?
IDs are a concept of HTML to mark an element in the document as unique. Thus it may be used in the whole document only once. If you are obeying this rule, you will be fine, otherwise you will get into trouble.
Javascript and CSS are two completely different technologies. You can use the HTML ID to target the element and apply CSS styles or work with it in some way via JS. Thus, JS and CSS do not directly interfere with each other.
However, you can change the ID with javascript or move it to another element, resulting in your css not applying it's rules anymore to the initial element (or applying them to another element). Also, you can apply styling via javascript, which might interfere with css.
Other than these described problems you can use the ID in both CSS and JS at will.
If you are intending to use the same ID for two elements . It is a bad idea but if you are updating an already existing ID with Javascript there should not be any problem . Also if you are using two elements with same ID make a separate class for both of the elements and use ID for differentiating between them
<div class="one" id="diff1">
</div>
<div class="one" id="diff2">
</div>
Normally nothing is happen, its depending upon your javascript function. To set font color, alignment to use class instead of id via css. For show/hide some div content mean you can use id within your javascript or jquery function, eventhough you can use class is not a mistake.

create html templates textarea or script or div or else

I have seen html templates created using any of the following tags
<textarea>
<script>
<div>
Which one is better and why?
Which of the following way of creating html templates is better and y?
CSS:
.template {
display: none;
}
textarea :
<textarea class="template" id="tmpl1">
<div>adfsdfsdfs</div>
</textarea>
script :
<script type="text/html" id="tmpl1">
<div>adfsdfsdfs</div>
</script>
div :
<div class="template" id="tmpl1">
<div>adfsdfsdfs</div>
</div>
I had faced problem with script tag here
i would suggest none of the above options take a look at Mustache it was created by one of the founders of git hub
http://mustache.github.com/
definitely my favorite way to do html templating
They are all poor choices.
textarea is designed to accept user input
div elements are designed to present content to the user
script elements are designed to hold programs
If you want to embed a template into an HTML document, then I'd write a JavaScript program to store it in a variable (and use a json serializer to generate the JavaScript literal that gets assigned to that variable). That program can then go in a script element.
Alternatively, store the template in a data-* attribute on an appropriate element.

Categories