Вложенные директивы, без шаблона, но нг-повтора в родительской директиве

Question

я пытаюсь объяснить мою проблему:

У меня есть пользовательская директива, которая содержит список элементов (в данный момент элементы являются пользовательскими директивами, но я не Не знаю, правильно ли это. Для каждого элемента мне нужно взять некоторые значения и поместить значения внутри родительской директивы, где у меня есть два разных ng-repeat. Возможно, кто-то думает, что я должен использовать эти значения внутри вложенной директивы и использовать ng-transclude в родительском. Но я не могу, потому что вложенная директива должна иметь два разных шаблона. Может быть, это не ясно, так что я мог видеть мой код:

index.html (где я использую директиву)

<rh-portfolio> 
    <rh-portfolio-image id="portfolio-item-six" url="images/portfolio/thumbnail/img-01.jpg" description="" category="construction"></rh-portfolio-image> 
    <rh-portfolio-image id="portfolio-item-seven" url="images/portfolio/thumbnail/img-02.jpg" description="" category="construction"></rh-portfolio-image> 
    <rh-portfolio-image id="portfolio-item-eight" url="images/portfolio/thumbnail/img-03.jpg" description="" category="construction"></rh-portfolio-image> 
    <rh-portfolio-image id="portfolio-item-nine" url="images/portfolio/thumbnail/img-04.jpg" description="" category="construction"></rh-portfolio-image> 
    <rh-portfolio-image id="portfolio-item-ten" url="images/portfolio/thumbnail/img-05.jpg" description="" category="construction"></rh-portfolio-image> 
</rh-portfolio> 

portofolio.js (там, где родительские и вложенные директивы есть)

.directive('rhPortfolio', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     templateUrl: '/partial_views/directives/templates/portfolio.html', 
     scope: {}, 
     controller: ['$scope', function ($scope) { 
      var images = $scope.images = []; 

      $scope.select = function (image) { 
       angular.forEach(images, function (image) { 
        image.selected = false; 
       }); 
       image.selected = true; 
      }; 

      this.addImage = function (image) { 
       if (image.length === 0) { 
        $scope.select(image); 
       } 
       images.push(image); 
      }; 
     }] 
    }; 
}) 
.directive('rhPortfolioImage', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     require: '^^rhPortfolio', 
     link: function (scope, element, attrs, portfolioCtrl) { 
      portfolioCtrl.addImage(scope); 
     } 
    }; 
}); 

И в конце концов, шаблон директивы

... 
<div class="tab-content tg-img-border"><!--portfolio-item-one--> 
    <div role="tabpanel" class="tab-pane fade in active" ng-repeat="image in images" id="{{ image.id }}"> 
     <figure><img src="{{ image.url }}" alt="{{ image.description }}"></figure> 
    </div> 
</div> 
... <!-- Here in the middle, there is a lot of code that must not be replicated --> 
<div role="presentation" ng-repeat="image in images" class="active portfolio-item grid-item {{ image.category }}"> 
    <div class="product-box"> 
     <a href="#{{ image.id }}" aria-controls="{{ image.id }}" role="tab" data-toggle="tab"> 
      <figure><img src="{{ image.url }}" alt="{{ image.description }}"></figure> 
      ... 
     </a> 
    </div> 
</div> 
... 

Как вы можете видеть, вложенная директива не имеет уникального шаблона .. поэтому я решил использовать два разных ng-repeat. Между двумя ng-repeat существует код, который не следует повторять, поэтому означает, что в любом случае он должен находиться внутри родительской директивы.

В любом случае, мой код не работает ... Я не понимаю, почему .. perhpas, потому что пытаюсь использовать атрибут элемента изображения, который определен в контроллере родителя, но он заполняется из вложенная директива.

EDIT Здесь вы можете увидеть проблему .. В нижней части страницы, вы должны увидеть портфолио, с изображениями ... но что-то не работает: http://simonerh.altervista.org/_test/

Здесь вы можете см VERSIONE без Angularjs (так, что я ожидал увидеть): http://simonerh.altervista.org/

EDIT2 Вот версия Plunker http://plnkr.co/edit/nf2bVkNujtb69WRfs0I7?p=preview

Может кто-нибудь мне помочь? thanx

Answer 1

У вас есть три проблемы.

1. Вы не передадите параметры в директиве rh-portfolio-image. Такие, как идентификатор, в URL и т.д.
2. Ваша директива rh-portfolio-image не вызывать, потому что директива rh-portfolio имеет свойство replace:true.
3. Вы не используете transclude:true. Подробнее о ng-transclude.

Я сменил ваш шаблон portfolio.html.Пожалуйста, проверьте punker. Это не законченное решение, но оно показывает вам, как создать директиву.

var renovahaus = angular.module("renovahaus", []) 
 
.directive('rhPortfolio', function() { 
 
     return { 
 
      restrict: 'E', 
 
      replace:true, 
 
      transclude:true, 
 
      template: '<section class="tg-main-section tg-haslayout bg-white"> <pre>images = {{images|json}}</pre><div ng-transclude></div></section>', 
 
      scope: {}, 
 
      controller: ['$scope', function ($scope) { 
 
       var images = $scope.images = []; 
 

 
       $scope.select = function (image) { 
 
        angular.forEach(images, function (image) { 
 
         image.selected = false; 
 
        }); 
 
        image.selected = true; 
 
       }; 
 

 
       this.addImage = function (image) { 
 
        if (image.length === 0) { 
 
         $scope.select(image); 
 
        } 
 
        images.push(image); 
 
       }; 
 
      }] 
 
     }; 
 
    }) 
 
    .directive('rhPortfolioImage', function() { 
 
     return { 
 
      restrict: 'E', 
 
      //replace: true, 
 
      require: '^^rhPortfolio', 
 
      scope: {id:"="}, 
 
      template:'<span>{{id}}</span>', 
 
      link: function (scope, element, attrs, portfolioCtrl) { 
 
       console.log(1); 
 
       portfolioCtrl.addImage(scope); 
 
      } 
 
     }; 
 
    }) .directive('rhPortfolioIm', function() { 
 
     return { 
 
      restrict: 'E', 
 
      scope: {id:"@"}, 
 
      require: '^rhPortfolio', 
 
      template:'<span>{{id}}</span>', 
 
      link: function (scope, element, attrs,portfolioCtrl) { 
 
       portfolioCtrl.addImage(scope); 
 
      } 
 
     }; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<!DOCTYPE html> 
 
<html class="no-js" lang=""> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
 
    <title>BootStrap HTML5 CSS3 Theme</title> 
 
    <meta name="description" content="" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
 
    <link rel="apple-touch-icon" href="apple-touch-icon.png" /> 
 
    <script data-require="jquery@1.11.3" data-semver="1.11.3" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
    <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
 
    <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" /> 
 
    <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /> 
 
    <script data-require="bootstrap@3.3.5" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
    <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script> 
 

 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="app.js"></script> 
 
    <script src="portfolio.js"></script> 
 
</head> 
 

 
<body class="home" ng-app="renovahaus"> 
 
    <rh-portfolio> 
 
    <rh-portfolio-im id="'portfolio-item-six'"></rh-portfolio-im> 
 
    <rh-portfolio-im id="'portfolio-item-seven'"></rh-portfolio-im> 
 
    </rh-portfolio> 
 
</body> 
 

 
</html>

P.S. В теге <div ng-transclude></div> содержится директива rhPortfolioIm.