Question

指令采用以下代码：

  <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似乎在指令的link函数中更新，但更新未反映在视图中
$ first似乎不起作用（为什么'ng-class =“{big：$ first}”仍在工作？“
isBig（我用$ first来解决这个问题）似乎对所有重复都是真或假，打败了目的。这应该永远不会发生，因为在指令之外调用$ first，因此每次调用指令都会更新。

Answer 1

请提供一个jsfiddle或plunkr来解决这些问题。它可以帮助您更轻松。您的问题实际上是因为ng-repeat在模板插入html代码后发生。因此它不能像这样工作。进行这些更改：

范围：

isbig: '='

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

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

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

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

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

所以不要在这里使用ng-class，但我理解角度将如何处理重复和我认为没有任何缺点的东西。

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

AngularJS：指令中的$ first + alter属性

1 个答案: