Question

我是棱角分明的新手，我正在尝试转换已在线的网站。我的问题是我正在使用jquery函数来调整通过json文件加载的图像的尺寸。

不幸的是，脚本不起作用，因为它似乎在图像初始化之前加载....

代码在主视图中... 我试图在索引中包含脚本src，但它不起作用。我也是在角度之前初始化jquery。

这是我正在使用的代码的一部分......

<div ng-repeat="topdiscount in topdiscounts.prodotti" class="col-md-3 col-xs-6 item-prod text-center">
    <p class='s25' ng-if=" topdiscount.prezzo_f == topdiscount.prezzos_f" class="md-xs-3" ><b>{{topdiscount.prezzo_f | currency}}</b></p>
    <p class='text-center' ng-if="topdiscount.prezzo_f = prodott.prezzos_f">
        <p class='line-through inline'><b>{{topdiscount.prezzo_f | currency}}</b></p>
        <p class='red s25 m-s-left inline'><b> {{topdiscount.prezzos_f | currency}}</b></p><br class='on_mobile'>
        <p class='sconto'>SCONTO 
            <span class='price-prod'>{{topdiscount.sconto_f}}%</span>
        </p>
    </p>
    <a class='link-prod' href="#/p/{topdiscount.id}}/{{topdiscount.nome_t | encodeUri}}" target="_blank"></a>
    <div class='social_share clearfix'>
        <p class='inline'> 
            <a href="https://www.pinterest.com/pin/create/button/?url=#/p/{topdiscount.id}}/{{topdiscount.nome_t | encodeUri}}"  media="{{topdiscount.immagine_t | encodeUri}}" description="buymadesimple.com: {{topdiscount.nome_t | encodeUri}}" data-pin-do='buttonPin' target='_blank' data-pin-config='above'>
                <img  alt='pin it' title='pin it' src="//assets.pinterest.com/images/pidgets/pin_it_button.png">
            </a>
        </p>
        <p class='inline'>
            <a href="javascript:void(0);" class="wishButton" data-refid="{topdiscount.id}}"><i id="i-{topdiscount.id}}"  class='fa fa-heart-'></i></a><!-- $iclass -->
        </p>
    </div>    
    <div class='img_container image-container'>
        <img class="prod_image" data-scale="best-fit-down" data-align="center" src="{{topdiscount.immagine_t}}" title="{{topdiscount.nome_t}}" alt="{{topdiscount.nome_t}}">
    </div>
        <p class='title-prod'><b>{{topdiscount.marca_t}}</b></p>
        <p class='name-prod'>{{topdiscount.nome_t}}</p><hr>
        <p class='market'>From {{topdiscount.shop_t}}</p>
    </div>
</div>

<script src="scripts/js/image.min.js" type="text/javascript"></script>
<script>
    $(function() {
        $("img.prod_image").imageScale();
    });
</script>

我不确定我是否正确解释过......但我希望你能帮助我...... 谢谢！

Answer 1

解决....需要使用指令......

angular.module('myApp') .directive('myScript', function() {
  return {
      restrict: 'A',
      template: '<img class="prod_image" data-scale="best-fit-down" data-align="center" src="{{img}}" title="{{name}}" alt="{{nome}}"></div>',
      link: function (scope, element, attrs) {
          $("img.prod_image").imageScale(); 
      }
  };

}）;

然后在main.html：

    <div my-script class='img_container image-container'>
                    </div>
...
 <script src="scripts/js/image.min.js" type="text/javascript"></script>

在index.html

中调用该指令

<script src="scripts/directives/myScript.js"></script>

非常感谢!!

在应用程序启动后加载一个脚本的angularjs

1 个答案: