AngularJS：$第一+改变属性的指令

一个指令需要验证码：

<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 = “{大：$第一}” 失败unexplicably这里）。

而且应该把它变成这样：

<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似乎在链接功能更新在指令中，但更新并未反映在视图中
$第一似乎不起作用（为什么犯规”纳克级=‘{大：$第一}’反正工作？）
isBig（我用先去解决这个问题有$）似乎对所有的重复都是真实的或错误的，从而破坏了目的。这应该不会发生，因为在指令之外调用$ first，并且因此每次调用指令时都会更新。

来源

2013-09-30 darioshanghai

请为这些问题提供一个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'||''}}">

所以不使用纳克级的在这里，但我的角度如何将处理重复和东西的理解，我相信是没有缺点在。

哦，这里是本完整的jsfiddle：http://jsfiddle.net/hssPn/3/

来源

2013-09-30 03:29:29

这完美的作品。我惊讶地发现自己以前没有偶然发现过这种语法。谢谢！ – darioshanghai

AngularJS：$第一+改变属性的指令

回答

相关问题