如何从视图中的ng-init中的json中获取数据

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

我有一个json在ng-init中我有一些数据我想抓取这些数据并绘制到模板中我用我的指令编译我不知道我做错了什么。我不能将json数据绘制到模板中

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.

这个li是ruby中的一个循环。

Template where I want to paint the data and compile this template when I click on a button that is inside the li:

当我点击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"><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>

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));

1 个解决方案

#1

You don't need quotes in ng-init statement. You are ending the statement prematurely.

在ng-init语句中不需要引号。你过早地结束了陈述。

<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

这里有一个工作示例:http://plnkr.co/edit/XRyYefxncZuqE5GeA3XG?p=preview

#1