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

Question

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

示例：

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

此 li 在 ruby 中的循环内。

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

我的指令和控制器：

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

Answer 1

您不需要在 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>

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

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

How I can take data from a json inside a ng-init in the view

json

angularjs

angularjs-scope

angularjs-ng-init