My problem is handlebars don't operate Json data output. I don't understand this problem. How can i handle it???
This is my JSON data
{
"boardInfo":
[
{"no":1,"title":"히히","url":null,"writerNick":"cheolhan","contents":"하하","createdDate":"2016-10-24","createdDate2":"2016-10-24","like":0,"viewCount":19,"email":null,"userNo":"1","categoryNo":2,"category":"스포츠","linkTitle":null,"linkURL":null,"linkDetailUrl":null,"linkImage":null,"linkDesc":null,"userProfilePath":null},
{"no":2,"title":"히히","url":null,"writerNick":"cheolhan","contents":"하하","createdDate":"2016-10-24","createdDate2":"2016-10-24","like":0,"viewCount":15,"email":null,"userNo":"1","categoryNo":2,"category":"스포츠","linkTitle":null,"linkURL":null,"linkDetailUrl":null,"linkImage":null,"linkDesc":null,"userProfilePath":null},
{"no":3,"title":"후후","url":null,"writerNick":"cheolhan","contents":"후후","createdDate":"2016-10-24","createdDate2":"2016-10-24","like":0,"viewCount":276,"email":null,"userNo":"1","categoryNo":2,"category":"스포츠","linkTitle":null,"linkURL":null,"linkDetailUrl":null,"linkImage":null,"linkDesc":null,"userProfilePath":null}
]
}
This is script code
var source = $('#liTemplateText').html();
var template = Handlebars.compile(source);
var data = result.data.boardInfo
data.stringify = JSON.stringify(data);
console.log(data)
var boards = template(data);
$("#post_wrapper").append(boards);
{{#each data}}
<li id="each_post_wrap">
<div id="each_post">
<div id="user_Nick">
<img class="user_Nonepht userInfoLink" src="/TeamProject/upload/{{userProfilePath}}" alt="userImg" data-userNo="{{userNo}}" data-userNick="{{writerNick}}">
<span class="userInfoLink" data-userNo="{{userNo}}" data-userNick="{{writerNick}}">{{writerNick}}</span>
</div>
<div class="post_photoWrap titleLink" data-no="{{no}}" data-userNo="{{userNo}}">
<a href="#">
<img src="{{linkImage}}" alt="Image File">
</a>
</div>
<a class="post_contsWrap">
<span class="each_post_title titleLink" data-no="{{no}}" data-userNo="{{userNo}}">{{title}}</span>
<span class="each_post_contents titleLink" data-no="{{no}}" data-userNo="{{userNo}}"><p>{{{contents}}}</p></span>
</a>
<div class="post_ctgWrap">
<span class="categoryLink" data-ctgNo="{{categoryNo}}">{{category}}</span>
</div>
<div class="post_BtnWrap">
<div class="post_leftBtn">
<img class="viewCount" src="/TeamProject/mainpage/mainpage_images/viewCount.png" alt="view">
<span>{{viewCount}}</span>
</div>
<div class="post_rightBtn">
<img class="like_Onclick" src="/TeamProject/mainpage/mainpage_images/likeOnClick.png" alt="like">
<span>{{like}}</span>
</div>
<div>
</div>
</li>
{{/each}}
This is HTML code
<div id="tabs" class="all_post_wrap">
<ul id="post_wrapper" class="tabs-1-contents">
</ul>
</div>
Any help much appreciated.
Related
I am creating a webscraper that needs to open up multiple tabs of items whose icons are filled. For example each page I need to open has div class="course-selector-item-pinned" in it's source code.
<dropdown-content max-width="800" min-width="450" no-padding="" vertical-offset="0" dir="ltr" dropdown-content="" style="--dropdown-verticaloffset:0px;" opened=""><div class="classselector-wrapper" aria-live="assertive">
<div id="classSelectorId" class="placeholder placeholder-live" aria-live="assertive">
<div class="2_7_615 2_8_459 body-compact">
<ul class="datalist vui-list">
<li class="datalist-item datalist-item-actionable datalist-simpleitem vui-selected" id="2_9_421" data-actionid="2_11_656">
<div class="datalist-item-content" title="Class 1">
<div class="class-selector-item class-selector-item-pinned" data-org-unit-id="12345">
<div class="2_160_610 class-selector-item-name">
<a class="link datalist-item-actioncontrol" id="2_11_656" href="/abc/home/12345">Class1</a>
</div>
<span id="2_10_630" data-active-id="2_161_292" data-inactive-id="2_162_883"><button-icon icon="tier1:pin-filled" id="2_161_292" onclick="O("__g2",3)();" text="Un-pin "Class 1"" dir="ltr" type="button"></button-icon>
<button-icon icon="tier1:pin-hollow" class="hidden" id="2_162_883" onclick="O("__g2",4)();" text="Pin "Class 1"" dir="ltr" type="button"></button-icon>
</span></div>
</div>
<div class="clear"></div>
</li>
<li class="datalist-item datalist-item-actionable datalist-simpleitem vui-selected" id="2_12_929" data-actionid="2_14_114">
<div class="datalist-item-content" title="Class 2">
<div class="class-selector-item class-selector-item-pinned" data-org-unit-id="23456">
<div class="2_160_610 class-selector-item-name">
<a class="link datalist-item-actioncontrol" id="2_14_114" href="/abc/home/23456">Class 2</a>
</div>
<span id="2_13_229" data-active-id="2_163_477" data-inactive-id="2_164_80"><button-icon icon="tier1:pin-filled" id="2_163_477" onclick="O("__g2",5)();" text="Un-pin "Class 2"" dir="ltr" type="button"></button-icon>
<button-icon icon="tier1:pin-hollow" class="hidden" id="2_164_80" onclick="O("__g2",6)();" text="Pin "Class 2"" dir="ltr" type="button"></button-icon>
</span></div>
</div>
<div class="clear"></div>
</li>
<li class="datalist-item datalist-item-actionable datalist-simpleitem vui-selected" id="2_15_372" data-actionid="2_17_26">
<div class="datalist-item-content" title="Class 3">
<div class="class-selector-item class-selector-item-pinned" data-org-unit-id="34567">
<div class="2_160_610 class-selector-item-name">
<a class="link datalist-item-actioncontrol" id="2_17_26" href="/abc/home/34567">Class 3</a>
</div>
<span id="2_16_595" data-active-id="2_165_349" data-inactive-id="2_166_873"><button-icon icon="tier1:pin-filled" id="2_165_349" onclick="O("__g2",7)();" text="Un-pin "Class 3"" dir="ltr" type="button"></button-icon>
<button-icon icon="tier1:pin-hollow" class="hidden" id="2_166_873" onclick="O("__g2",8)();" text="Pin "Class 3"" dir="ltr" type="button"></button-icon>
</span></div>
</div>
<div class="clear"></div>
</li>
I need the webscraper to find all div classes that has "course-selector-item-pinned" and then take the value in data-org-unit-ids. For example the list would return [12345, 23456, 34567] in this case.
The line of source code I am referring to is:
<div class="class-selector-item-pinned" data-org-unit-id"12345">
<div class="class-selector-item-pinned" data-org-unit-id"23456">
<div class="class-selector-item-pinned" data-org-unit-id"34567">
This is what I have done so far the list is not returning anything.
Get List of Unit IDs
courseString='https://example.com/abc/p/home'
listofUnitID =[]
links = [elem.get_attribute("data-org-unit-id") for elem in driver.find_elements_by_class_name("class-selector-item-pinned")]
Filter out none type from list
res = []
for val in links:
if val != None :
res.append(val)
print(res)
List to Keep Only Classes
for i in res:
if courseString in i:
listOfHref.append(i)
print(listOfUnitID)
If I looks your HTML, actually you want scrape the following div:
<div class="class-selector-item class-selector-item-pinned" data-org-unit-id="34567">
...
...
Not this:
<div class="class-selector-item-pinned" data-org-unit-id"12345">
<div class="class-selector-item-pinned" data-org-unit-id"23456">
<div class="class-selector-item-pinned" data-org-unit-id"34567">
It causes you code not returning anything, because you are targeting the div with multiple classes.
.find_elements_by_class_name just for single class name.
You can try with .find_elements_by_css_selector('css_selector'), like this:
links = [elem.get_attribute("data-org-unit-id") for elem in driver.find_elements_by_css_selector(".class-selector-item.class-selector-item-pinned")]
This is my first time using react and I am sure that code given is probably not using react's best practices but I am just playing around with it to understand it for now, my problem is that I am trying to access the divs and paragraphs inside the modal but document querySelector returns null. Any ideas? Thanks
moreInfo(movie) {
const movieModalImg = document.querySelector(".movieModalImg");
const movieModalTitle = document.querySelector(".movieModalTitle");
const movieModalRunTimeNum = document.querySelector(
".movieModalRunTimeNum"
);
}
render() {
return (
<div>
<div id="modal">
<Modal
isOpen={this.state.setIsOpen}
onRequestClose={this.closeModal.bind(this)}
contentLabel="Example Modal"
>
<a className="closeModalBtn" onClick={this.closeModal} href={"#"}>
×
</a>
<div className="modal-wrapper">
<div>
<img src={moviePoster} className="movieModalImg" alt=""></img>
</div>
<p className="movieModalTitle"></p>
<div className="movieModalRunTime">
<h4>Runtime:</h4>
<p className="movieModalRunTimeNum"></p>
<p>Minutes</p>
</div>
<div className="movieModalProductionCountry">
<h4>Production Countries:</h4>
<p className="movieModalProductionCountries"></p>
</div>
<div className="movieModalVoteCount">
<h4>Vote Count:</h4>
<p className="movieModalVoteCountNum"></p>
</div>
<div className="movieModalRevenew">
<h4>Revenew:</h4>
<p className="movieModalRevenewNum"></p>
<p>$</p>
</div>
<div className="movieModalBudget">
<h4>Budget:</h4>
<p className="movieModalBudgetNum"></p>
<p>$</p>
</div>
</div>
</Modal>
</div>
<a
href="#"
className="movieCoverMoreInfo"
onClick={this.moreInfo.bind(this)}
>
<img className="moreInfoIcon" src={info} alt=""></img>
More Info
</a>
</div>
);
}
Here is my messageboard project, I don't know why the different will influence my css layout...
I just test english,chinese,thai they both work great, but only japanese will destroy my css style..
I use en_US,ja_JP,zh_TW,th_TH php file to change language
When use English
When use japanese
<li class="board_list">
<div class="board_img">
<img class="board_icon" src="./static/icon/board_icon.svg" alt="board icon">
</div>
<div class="board_text">
<div class="board_title">
<span>
<a href="./board.php?board_id=1">
<span>This was just test the title length of board name</span>
</a>
</span>
</div>
<div class="board_info">
<p class="p1">投稿:26</p>
</div>
</div>
<div class="board_latest">
<div class="board_latest_title">
<span>最新の投稿 :</span>
This was just test the title length of board name
</div>
<div class="board_latest_info">
<a href="./member.php?user=1" title="carry0987">
<span>carry0987,</span>
</a>
<span>2018-04-28</span>
</div>
</div>
</li>
<li class="board_list">
<div class="board_img">
<img class="board_icon" src="./static/icon/board_icon.svg" alt="board icon">
</div>
<div class="board_text">
<div class="board_title">
<span>
<a href="./board.php?board_id=2">
<span>Default</span>
</a>
</span>
</div>
<div class="board_info">
<p class="p1">投稿:6</p>
</div>
</div>
<div class="board_latest">
<div class="board_latest_title">
<span>最新の投稿 :</span>
This was just test the title length of board name
</div>
<div class="board_latest_info">
<a href="./member.php?user=2" title="carry0987y">
<span>carry0987y,</span>
</a>
<span>2018-04-28</span>
</div>
</div>
</li>
And this is my css code
.board_list {
border-width: 1px;
border-style: solid;
border-color: #E9E9E9;
}
You should add new div inside .board_list this class and add css property clear:both;
Something like this :
Also read this article : https://www.w3schools.com/cssref/pr_class_clear.asp
I ran my website in the W3C Validator only to be given these errors:
<a href="#header-anchor">
<img src="img/banner.png" width="169" height="54" alt="Logo">
</a>
The errors I got are:
Line 14, column 28: An a start tag seen but an element of the same type was already open.
Line 14, column 28: End tag a violates nesting rules.
Line 14, column 28: Cannot recover after last error. Any further errors will be ignored.
I am not sure what is causing this error, so any help will appreciated. Thanks.
EDIT: Apparently this piece of code is causing the error but I am not sure what it is exactly causing it:
<a href="index.html">
Edit 2: Whole code:
<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<!-- Banner -->
<a class="anchor" id="header-anchor">
<div id="header-wrapper">
<header role="banner" id="header">
<a href="index.html">
<img src="img/banner.png" width="169" height="54" alt="Logo">
</a>
<nav role="navigation">
<ul>
<li>HOME</li>
<li>SERVICES</li>
<li>OUR TEAM</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
</div>
<div id="banner-wrapper">
<section id="banner">
<h2>Title</h2>
<h3>Tagline</h3>
</section>
</div>
<!-- Services -->
<a class="anchor" id="services-anchor"></a>
<div class="wrapper">
<section id="services" class="group">
<h2>Our Services</h2>
<div class="floatleft small"> <span class="fa-stack fa-3x"> <i class="fa fa-line-chart fa-stack-1x fa-inverse"></i> </span>
<h3>Service 1</h3>
<p>Service 1</p>
</div>
<div class="floatleft small"> <span class="fa-stack fa-3x"> <i class="fa fa-money"></i> </span>
<h3>Service 1</h3>
<p>Service 1</p>
</div>
<div class="floatleft small"> <span class="fa-stack fa-3x"> <i class="fa fa-globe"></i> </span>
<h3>Service 1</h3>
<p>Service 1</p>
</div>
</section>
</div>
<!-- About us -->
<a class="anchor" id="team-anchor"></a>
<section id="team" class="group">
<h2>Our Team</h2>
<div class="floatleft mid"> <img src="img/ben.jpg" width="250" height="250" alt="Ben Fitchew">
<h3>Team 1</h3>
<p>Team 1</p>
</div>
<div class="floatleft mid"> <img src="img/jeremy.jpg" width="250" height="250" alt="Jeremy Lang">
<h3>Team 1</h3>
<p>Team 1</p>
</div>
<div class="floatright mid"> <img src="img/gianluca.jpg" width="250" height="250" alt="Gianluca Monaco">
<h3>Team 1</h3>
<p>Team 1</p>
</div>
<div class="floatright mid"> <img src="img/will.jpg" width="250" height="250" alt="William Pattisson">
<h3>Team 1</h3>
<p>Team 1</p>
</div>
</section>
<!-- About -->
<div class="wrapper"> <a class="anchor" id="about-anchor"></a>
<section id="about" class="group" role="main">
<h2>About</h2>
<h3>About</h3>
<p>About</p>
</section>
</div>
<!-- Slideshow -->
<div class="wrapper">
<h2>Slideshow</h2>
<h3>Slideshow</h3>
<p class="Slideshow"><img src='images/picture1.jpg' name='SlideShow'/></p>
</section>
</div>
<!-- Javascript code -->
<script type="text/javascript">
var slideShowSpeed = 2000;
var Pic = new Array();
Pic[0]='img/picture1.jpg';
Pic[1]='img/picture2.jpg';
Pic[2]='img/picture3.jpg';
Pic[3]='img/picture4.jpg';
Pic[4]='img/picture5.jpg';
Pic[5]='img/picture6.jpg';
var currentPicture = 1;
var pictureNo = Pic.length;
var preLoad = new Array();
for (i = 0; i < pictureNo; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration=3)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[currentPicture].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
currentPicture = currentPicture + 1;
if (currentPicture >= pictureNo)
currentPicture = 0;
setTimeout('runSlideShow()', slideShowSpeed);
}
</script>
<script>
runSlideShow();
</script>
<!-- Contact -->
<a class="anchor" id="contact-anchor"></a>
<div class="map-wrapper">
<section id="contact" class="group">
<h2>Contact Us</h2>
<div id="map-canvas" class="floatleft mid"></div>
<div class="floatright mid">
<form id="frmContact" action="mail.php" method="post" role="form">
<label for="txtName" id="lblName">Name</label>
<input type="text" name="txtName" id="txtName" aria-labelledby="lblName" required placeholder="Enter your name here" minlength="3" maxlength="70" pattern="[a-zA-Z ]+">
<span class="error_show">Name is not valid!</span>
<label for="txtEmail" id="lblEmail">Email</label>
<input type="email" name="txtEmail" id="txtEmail" aria-labelledby="lblEmail" required placeholder="Enter your email here" minlength="5" maxlength="254">
<span class="error_show">Email is not valid!.</span>
<label for="txtMessage" id="lblMessage">Message</label>
<textarea name="txtMessage" id="txtMessage" aria-labelledby="txtMessage" required placeholder="Enter your message here"></textarea>
<span class="error_show">Message is not valid!</span>
<input type="submit" name="submit" id="submit" value="Send Message">
</form>
</div>
</section>
</div>
<!-- Javascript -->
<script src="js/jquery-2.1.1.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
// Code for Google Map
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var myLatLng = new google.maps.LatLng(51.51463,-0.106533);
var mapOptions = {
center: myLatLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Ardevora'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function() {
// Form Validation Code
$('#txtName').on('input', function() {
var input=$(this);
var is_name=input.val();
if (is_name) {
input.removeClass("invalid").addClass("valid");
input.next().hide();
} else {
input.removeClass("valid").addClass("invalid");
input.next().show();
}
});
$('#txtEmail').on('input', function() {
var input=$(this);
var regex = /^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,6}$/i;
var is_email=regex.test(input.val());
if (is_email) {
input.removeClass("invalid").addClass("valid");
input.next().hide();
} else {
input.removeClass("valid").addClass("invalid");
input.next().show();
}
});
$('#txtMessage').keyup(function(event) {
var input=$(this);
var message=$(this).val();
if (message) {
input.removeClass("invalid").addClass("valid");
input.next().hide();
} else {
input.removeClass("valid").addClass("invalid");
input.next().show();
}
});
$("#submit").click(function(event) {
var form_data=$("#frmContact").serializeArray();
var error_free=true;
for (var input in form_data){
var element=$("#"+form_data[input]['name']);
var valid=element.hasClass("valid");
var error_element=element.next();
if (!valid) {
error_element.show();
error_free=false;
} else {
error_element.hide();
}
}
if (!error_free){
event.preventDefault();
}
});
});
</script>
<!-- Cookie Script -->
<script type="text/javascript">
(function(){
var msg = "We use cookies to enhance your web browsing experience. By continuing to browse the site you agree to our policy on cookie usage.";
var closeBtnMsg = "Ok I comply";
var privacyBtnMsg = "Privacy Policy";
var privacyLink = "http://www.google.com";
//check cookies
if(document.cookie){
var cookieString = document.cookie;
var cookieList = cookieString.split(";");
// if cookie named OKCookie is found, return
for(x = 0; x < cookieList.length; x++){
if (cookieList[x].indexOf("OKCookie") != -1){return};
}
}
var docRoot = document.body;
var okC = document.createElement("div");
okC.setAttribute("id", "okCookie");
var okCp = document.createElement("p");
var okcText = document.createTextNode(msg);
//close button
var okCclose = document.createElement("a");
var okcCloseText = document.createTextNode(closeBtnMsg);
okCclose.setAttribute("href", "#");
okCclose.setAttribute("id", "okClose");
okCclose.appendChild(okcCloseText);
okCclose.addEventListener("click", closeCookie, false);
//privacy button
var okCprivacy = document.createElement("a");
var okcPrivacyText = document.createTextNode(privacyBtnMsg);
okCprivacy.setAttribute("href", privacyLink);
okCprivacy.setAttribute("id", "okCprivacy");
okCprivacy.appendChild(okcPrivacyText);
//add to DOM
okCp.appendChild(okcText);
okC.appendChild(okCp);
okC.appendChild(okCclose);
okC.appendChild(okCprivacy);
docRoot.appendChild(okC);
okC.classList.add("okcBeginAnimate");
function closeCookie(){
var cookieExpire = new Date();
cookieExpire.setFullYear(cookieExpire.getFullYear() +2);
document.cookie="OKCookie=1; expires=" + cookieExpire.toGMTString() + ";";
docRoot.removeChild(okC);
}
})();
</script>
<!-- Footer -->
<footer role="contentinfo">
<!-- Left Footer -->
<ul class="floatleft">
<li>HOME</li>
<li>SERVICES</li>
<li>OUR TEAM</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
<!-- Right Footer -->
<ul class="floatright">
<p>Copyright 2014</p>
</ul>
</footer>
</body>
</html>
What is your declaration of page? Likely to be a bug in the non-completion of the <img /> tag.
<img src="img/banner.png" width="169" height="54" alt="Logo" />
Tag <a> should have a title="Title a" consistent with alt="Alt img" image
The tag <a class="anchor" id="header-anchor"> has no closing tag. This causes the elements after it to be taken as its content, which in turn leads to violation of element nesting rules. The simplest fix is to add the closing tag immediately after the start tag:
<a class="anchor" id="header-anchor"></a>
Such an element is not good style, though. You can probably work with just id attributes and class attributes assigned to elements with real content.
Fixing the problem causes some errors later in the document to be reported, but they are relatively easy to analyze (especially with the help of the explanations).
I have a json inside a ng-init where I have some data and I want to grab these data and paint into a template and I compiled with my directive and I don't have idea what I'm doing wrong. I can not paint json data into the template
example:
<li ng-init="product= {"brand":"Nike", "price":"30€", "mainImage":"images/images.jpg"}>
<div class="content-product>
<div class="product">
<p>Nike </p>
<img src="image.jpg" alt="">
<p>30€ </p>
</div>
</div>
</li>
This li is inside a loop in ruby.
Template where I want to paint the data and compile this template when I click on a button that is inside the li:
<script type="text/ng-template" id="quickpreview.html">
<div class="content-preview">
<div class="content-preview-inner">
<span class="full-preview"></span>
<span class="close-preview"></span>
<div class="block block-left left">
<div class="content-tabs">
<dl class="tabs vertical" data-tab>
<dd class="active">Tab 1
</dd>
<dd>Tab 2
</dd>
<dd>Tab 3
</dd>
<dd>Tab 4
</dd>
<dd>Tab 5
</dd>
</dl>
<div class="tabs-content vertical">
<div class="content active" id="panel1">
<div class="content-img">
<div class="main-img">
<img ng-src="{{product.mainImage}}" alt="">
</div>
<div class="thumbnails">
<a class="th" role="button" aria-label="Thumbnail" href="">
<img aria-hidden=true src="" />
</a>
</div>
</div>
</div>
<div class="content" id="panel2">
<p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p>
</div>
<div class="content" id="panel3">
<p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p>
</div>
<div class="content" id="panel4">
<p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p>
</div>
<div class="content" id="panel5">
<p>This is the fifth panel of the basic tab example. This is the fourth panel of the basic tab example.</p>
</div>
</div>
</div>
</div>
<div class="block block-right right">
<div class="content-details">
<div class="details">
<h3 class="title-product">{{product.brand}}</h3>
<h2 class="short-desc">{{product.shortname}}</h2>
<div class="block-price">
</div>
</div>
</div>
</div>
</div>
</div>
my directive and controller:
(function() {
'use strict';
var app = angular.module('quickPreview');
app.controller('globalCtrl', function ($scope) {
// var e = angular.element($("[ng-init]"));
// console.log(e);
// $scope.product = e.attr('ng-init');
// console.log($scope.product);
$scope.product = [];
var logSomeStuff = function(){
console.log($scope.product);
}
$scope.$evalAsync(logSomeStuff);
});
}(window, window.angular));
(function (){
"use strict";
var app = angular.module('quickPreview');
app.directive('previewProduct', function ($compile,$templateCache) {
return {
restrict: 'A',
replace: false,
transclude: false,
scope: {
attrData: '=dataOverview'
},
link: function(scope, element, attrs) {
element.bind('click', '.sd-click-preview', function (){
var preview = angular.element($templateCache.get('quickpreview.html'));
var cpreview = $compile(preview);
element.append(preview);
cpreview(scope);
console.log(cpreview(scope))
if (scope.attrData) {
console.log(this, '=> this');
}
});
}
};
});
}(window, window.angular));
You don't need quotes in ng-init statement. You are ending the statement prematurely.
<li ng-init="product= {brand:'Nike', price:'30€', mainImage:'images/images.jpg'}">
<div class="content-product">
<div class=" product ">
<p>{{product.brand}}</p>
<img ng-src="{{product.mainImage}} " alt=" ">
<p>{{product.price}}</p>
</div>
</div>
</li>
Here's a working example:http://plnkr.co/edit/XRyYefxncZuqE5GeA3XG?p=preview