Question

我有一个标签功能，根据值调用不同的href。

<div ng-repeat="feed in feeds" link="{{feed.link}}" class="TabBody{{$index+1}}   HasLink" ng-class="tab === ($index + 1) ? 'active': 'nonActive'" tabs readurlarray='{{myJsonArray}}'>  
<contents> 
</div>

这是我的指示：

    app.directive('tabs', function($http){

    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
          $http({
            url: 'http://pipes.yahoo.com/pipes/pipe.run?_id='+ attrs.link  +'&_render=json',
            method: 'GET'
            }).success(function(data){
              scope.data = data 
            })
        }

    }       
})

在进行管道调用之前，我需要一种方法来检查我的指令是否链接有值。有两个链接没有通过管道运行，因此当我尝试进行调用时，链接没有值，我收到错误。我试过这样的事情：

if($('.HasLink').attr('link').length > 0)

它似乎只捕获了第一个链接的长度，并且在查看其他链接时没有更新。

这是我的范围包含链接：

    $scope.feeds = 
  [ 
    {'link':'712aa10215bb0cf343246d724f4205a', 'name':'SM'},
    {'link':'149ce97c7ba5f03370cc1b111531e44', 'name':'CS'},
    {'name':'FORUM'}, 
    {'name':'CPSUA'}, 
    {'link':'73d3b4e72c4e1890094add0c2a2fee9', 'name':'INTRASPECTUS'},
    {'link':'6f574710e0d562406b28f1dab67fff3', 'name':'SALES'},
    {'name':'LIBRARY'},
    {'link':'e05db886024ddaa70b08ddfbb794875', 'name':'KY'},
    {'link':'5dcd5fd3417519d2dce9e3a66690da6', 'name':'UK'},
    {'link':'27206e0fbd6b4eca9673c3dcb2d4fa7', 'name':'THE FEED'}
  ]

Answer 1

使用过滤器：http://plnkr.co/edit/OLCqIy3JwhUZnB9HCUWV

.filter('yourFilter', function () {
    return function (feeds) {
        return feeds.filter(function (feed) {
            return feed.link !== undefined;
        });
    }
});


<div ng-repeat="feed in feeds | yourFilter">
    {{feed}}
</div>

Answer 2

请见http://jsbin.com/lativa/1/

  app.directive('tabs', function($http){

    return {
        restrict: "A",
       scope:{
        dlink : "=",
        dname: "="
      },
        link: function(scope, elem, attrs) {
if(scope.dlink) {

          $http({
            url: 'http://pipes.yahoo.com/pipes/pipe.run?_id='+ attrs.link  +'&_render=json',
            method: 'GET'
            }).success(function(data){
              scope.data = data 
            })
        }
}

    }       
})

HTML：

<div ng-repeat="feed in feeds" link="{{feed.link}}" class="TabBody{{$index+1}}   HasLink" ng-class="tab === ($index + 1) ? 'active': 'nonActive'"
     tabs dlink="feed.link" dname="feed.name" >  

</div>

Answer 3

app.directive('tabs', function($http){
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
        if (attrs.link != ''){  
          $http({
            url: 'http://pipes.yahoo.com/pipes/pipe.run?_id='+ attrs.link  +'&_render=json',
            method: 'GET'
            }).success(function(data){
              scope.data = data 
            })
            }
        }  
    }       
})

通过在定义链接之后放置if语句，可以轻松访问该值，并可以从那里进行比较。

检查指令的一部分是否有价值 - Angular JS

3 个答案: