Question

我知道如果我使用指令ng-repeat，就像下面一样，我得到内部的每个元素，包括在DOM上重复的div。

DECLARE @NewLineChar AS CHAR(2) = CHAR(13) + CHAR(10)

但是现在我想要一些不会重复的父元素，但会为子元素使用相同的范围对象，然后重复。所以，我想做一个将范围属性附加到父节点的转发器，如下所示：

DECLARE @NewLineChar AS CHAR(2) = CHAR(13) + CHAR(10)
PRINT ('SELECT FirstLine AS FL ' + @NewLineChar + 'SELECT SecondLine AS SL')

我想知道是否可以重用本机角度指令（我不希望每次为每个父节点运行相同的转发器），它可以将元素附加到父节点。如果没有，您对解决方案有任何建议吗？我查找了一些我没有成功应用它们的自定义指令的链接。因此，如果您有一个'初学者'自定义指令教程可以帮助我朝着正确的方向前进，那么我们将非常感激。

Answer 1

检查一下：

HTML：

<div ng-app="myApp" ng-controller="myCtrl">
  <ul class="parent1">
    <li ng-repeat="item in myScope">
      <img ng-src={{item.imgUrl}}>
    </li>
  </ul>
  <div class="parent2">
     <p ng-repeat="item in myScope"><span>{{item.description}}</span></p>
  </div>
</div>

控制器：

 angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
    $scope.myScope = [
      {imgUrl:"someUrl1", description: "this is first url"},
      {imgUrl:"someUrl2", description: "this is second url"}
    ]
  }]);

可以接受:)？

Answer 2

我不知道我是否完全理解你的要求。无论如何，ngRepeat指令放在特定父级下的DOM中，因此您不能运行一次并将叶子附加到不同的父级下。唯一的方法是创建一个在内部运行循环的自定义指令，并将叶子设置在您选择的父级下。那就是：

angular
  .module('mymodule')
  .directive('mydirective', mydirective);

function mydirective(){
  var directive = {
                restrict: 'A'
              , link: link
  }

  return directive;

  function link($scope, elem, attrs) {
    for(var i=0;i<$scope.myScope.length;++i){
      var el1 = angular.element('<li><img src='+$scope.myScope[i].imgUrl+'></li>'),
          el2 = angular.element('<span>'+$scope.myScope[i].description+'</span>');
      elem.find('.parent1').append(el1);
      elem.find('.parent2').append(el2);
    }
  }
}

如果我误解了你的目标，请告诉我。

Angularjs - 转发器在视图中附加不同父母的元素

2 个答案: