0

指令采用以下代码：

  <div ng-repeat="image in home_images | limitTo: 5 " imagesrc="img/links/{{image.file_name}}" imagelink="{{image.url}}" title="{{image.title}}" caption="{{image.caption}}" isbig="$first"></div>

（ng-class="{big: $first}" 在这里莫名其妙地失败了）。

应该把它变成这样：

<a ng-href="{{imagelink}}" class="image-link">
    <div class="image" ng-class="{big: isbig === 'true'}">
        <div class="caption"><h6>{{title}}</h6><span>{{caption}}</span></div>
        <img ng-src="{{imagesrc}}" alt="title">
    </div>
</a>

这是指令：

  .directive('imagelink', function(){
    return {
      replace: true,
      scope: {
        imagesrc: '@',
        imagelink: '@',
        title: '@',
        caption: '@',
        isbig: '@'
      },
      templateUrl: 'partials/image-link.html',
      link: function(scope, element, attrs){
        element.bind('mouseenter', function(){
          element.addClass('show-caption');
        });
        element.bind('mouseleave', function(){
          element.removeClass('show-caption');
        });
        if (attrs.isbig) {
          console.log(attrs);
          attrs.imagesrc = attrs.imagesrc + "_bg.png";
        } else {
          attrs.imagesrc = attrs.imagesrc + "_sm.png";
        }
      }
    };
  });

存在三个问题：

  • attrs 似乎在指令中的链接函数中更新，但更新并没有反映在视图中

  • $first 似乎不起作用（为什么 ng-class="{big: $first}" 无论如何都不起作用？）

  • isBig（我用 $first 来解决这个问题）对于所有重复似乎是真或假，违背了目的。这绝不应该发生，因为 $first 在指令之外被调用，因此它应该随着对指令的每次调用而更新。

4

1 回答 1

1

请为此类问题提供 jsfiddle 或 plunkr。它使帮助您变得更加容易。您的问题实际上是因为 ng-repeat 发生在模板插入 html 代码之后。因此它不能像这样工作。进行以下更改：

在适用范围：

isbig: '='

这会在指令作用域中的 isbig 和父作用域之间创建双向绑定。这是必要的，因为如上所述，ng-repeat 在模板提取之后执行。因此，您需要以这种方式绑定 isbig。

然后摆脱 attrs 操作，而是在模板中添加必要的后缀：

<img ng-src="{{imagesrc}}{{ (isbig&&'_bg.png'||'_sm.png') }}" alt="title">

对于 ng 级问题。我无法让它使用该语法。但这似乎有效：

<div class="image {{isbig&&'big'||''}}">

所以在这里不使用 ng-class，但我对 angular 将如何处理重复和我相信没有缺点的东西的理解。

哦，这是一个完整的 jsfiddle 显示：http: //jsfiddle.net/hssPn/3/

于 2013-09-30T03:29:29.803 回答