Question

我想知道是否可以将属性指令添加到ng-repeat中的某些元素。我试过检查CSS类或id，但没有运气。

示例代码

unordered_map<string, int> m;
for(int i = 0; i < sizeof(town)/sizeof(town[0])); i++){
    m[town[i]]++;
}
for(unordered_map<string, int>::iterator it = m.begin(); it != m.end();){
    if(it->second > 1) it = m.erase(it);  //erase returns next iterator since C++11
    else it++;
 }
std::cout << m.size() << std::endl;

html的例子

class ItemNavigation {

  constructor(NavigationService ) {
      this.NavigationService = NavigationService;
  }

}

angular.module('core')
  .directive('itemNavigation', function ($timeout) {
    return {
      bindToController: true,
      scope: {
        itemId: '='
      },
      controllerAs: '$ctrl',
      restrict: 'A',
      link: function(scope, elem, attrs, ctrl) {
        $timeout(() =>{
          elem.bind('click', function() {
            let noRedirect = $(this).hasClass('no-redirect');
            // this approch doesnt work it never finds class
            if(!noRedirect) return ctrl.NavigationService.goToItemDetails(ctrl.itemId)        
          })
        })
       ;
      },
      controller: ItemNavigation 
    };
  });

我将不胜感激任何帮助

Answer 1

我认为你可以;根据我的理解，你只想为偶数行设置一个条件。

一个简单的解决方案：在ng-repeat行中使用$ index放置一个条件。

  <tr ng-repeat="item in $data track by item.id" item-navigation item-id="item.id">
  <td class="no-redirect" ng-if="$index % 3 == 0">I dont want my directive to work here</td>
  <td class="no-redirect" ng-if="$index % 2 == 0">I want my directive to work here</td>

</tr>

这些是您需要在指令中进行的更改。

   app.directive('rowNavigation', function ($timeout) {
    return {
      scope: {
    itemId: '='
  },
  controllerAs: 'ctrl',
  restrict: 'A',
  link: function(scope, elem, attrs, ctrl) {
      $timeout(function() {
      elem.bind('click', function() {
         console.log(ctrl)
         alert(ctrl.itemId);
      })
   });
  },
  controller: function($scope) {
    this.itemId = $scope.itemId
   } 
};
});

在你重复中，将其改为

 <tr ng-repeat="one in data"  item-id="one.id"
  class="table table-striped table-bordered">
    <td  class="no-redirect">Dont alert when i click here</td>
    <td row-navigation item-id="one.id">Alert when i click here</td>
    <td row-navigation item-id="one.id">Alert when i click here</td>
  </tr>

希望这有帮助。

Answer 2

在检查hasClass而不是element本身时，您似乎将其绑定到窗口对象。

let noRedirect = $(this).hasClass('no-redirect'); // update this
let noRedirect = elem.hasClass('no-redirect'); // this should help

你可以console.log验证吗？让我们知道。

Answer 3

如果目标是更改子节点上的点击行为，只需使用ng-click指令：

<table>
<!--       Also please dont use stop Event.stopPropagation() 
           as it breaks some of flow on mobile devices in my application 
-->
  <tr ng-repeat="one in data" ng-click="alert(one.id)"
  class="table table-striped table-bordered">
    <td class="no-redirect" ng-click="dontAlert($event)">
        Dont alert when i click here</td>
    <td>Alert when i click here</td>
    <td>Alert when i click here</td>
  </tr>
</table>

为了避免使用event.stopPropagation，让子点击处理程序为父点击处理程序设置一个标志：

var dontAlertFlag = false;

$scope.alert = function(id) {
    !dontAlertFlag && alert(id);
    dontAlertFlag = false;
};
$scope.dontAlert = function(event) {
    //event.stopPropagation();
    dontAlertFlag = true;
    console.log(event);
}

在上面的示例中，单击子元素时，子单击处理程序会将dontAlertFlag设置为true。父单击处理程序使用该标志然后重置它。

DEMO on PLNKR

更新

使用event.target属性

可以简化代码

<table>
<!--       Also please dont use stop Event.stopPropagation() 
           as it breaks some of flow on mobile devices in my application 
-->
  <tr ng-repeat="one in data" ng-click="alert(one.id,$event)"
  class="table table-striped table-bordered">
    <td class="no-redirect">
        Dont alert when i click here</td>
    <td>Alert when i click here</td>
    <td>Alert when i click here</td>
  </tr>
</table>

JS

   $scope.alert = function(id,event) {
        var $target = angular.element(event.target);
        console.log($target);
        if (!$target.hasClass("no-redirect")) {
             alert(id);
        }
        console.log(event);
    };

在上面的示例中，click处理程序检查目标以查看它是否具有名为no-redirect的类。如果目标没有该类，则会触发警报。

DEMO on PLNKR

Answer 4

您可以将事件目标添加到您的代码中，如果您需要从tds复制文本，它也将解决问题，并且只有在文本外部单击时，您的指令才会起作用。您也可以从代码中删除超时。

请检查以下更改

   <table>
      <tr ng-repeat="one in data" row-navigation item-id="one.id"
      class="table table-striped table-bordered">
        <td class="no-redirect">Dont alert when i click here</td>
        <td><span class="no-redirect">Dont when i click on this text only, but works in TD element</span></td>
        <td>Alert when i click here</td>
      </tr>
    </table>

，您的链接功能应如下所示

 app.directive('rowNavigation', function () {
    return {
      scope: {
        itemId: '='
      },
      controllerAs: 'ctrl',
      restrict: 'A',
      link: function(scope, elem, attrs, ctrl) {

          elem.bind('click', function(event) {
            var noRedirect = $(event.target).hasClass('no-redirect');
            // it will work now
            if(!noRedirect) alert(ctrl.itemId)        
          })

      },
      controller: function($scope) {
        this.itemId = $scope.itemId
       } 
    };
  });

有条件地将属性指令添加到ng-repeat

4 个答案:

更新