Quiero ver si hay alguien por aqui que me pueda echar una mano con un pequeño problema que tengo, que ya se me esta convirtiendo en dolor de cabeza.
Explico lo que me pasa. Tengo un en la vista definido un $scope de esta forma:
Código:
el ng-init esta en u "li" de esta forma ng-init="product= {"marca":"adidas", "price":"30€", "mainImage":"url de la image"}
Código HTML:
<li n-init="product= {"marca":"adidas", "price":"30€", "mainImage":"url de la image"}> </li>
Lo que quiero hacer es que cuando hago click en un botón que tengo dentro del "li" este a la vez me compila un html en el y a la vez quiero que me pinte la información del json.
Este es el templete donde quiero pintar los datos que recojo del json que esta dentro de un ng-init:
Código:
<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"><a href="#panel1">Tab 1</a></dd>
<dd><a href="#panel2">Tab 2</a></dd>
<dd><a href="#panel3">Tab 3</a></dd>
<dd><a href="#panel4">Tab 4</a></dd>
<dd><a href="#panel5">Tab 5</a></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>
</script>
Aqui dejo mi controller y directive:
Código:
(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));
Mi directives:
Código:
(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));
