嵌套指令沒有模板，但NG-重複在父母指導

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因爲嘗試使用在父級的控制器中定義的「image」元素的屬性，但它是從嵌套指令。

編輯 在這裏你可以看到這個問題。在頁面的底部，你應該看到的組合，與圖像......但事情不工作： http://simonerh.altervista.org/_test/

在這裏，您可以看到沒有Angularjs的versione（所以，我希望看到）： http://simonerh.altervista.org/

EDIT2 這裏一個Plunker版本 http://plnkr.co/edit/nf2bVkNujtb69WRfs0I7?p=preview

任何人都可以幫我嗎？ thanx

Answer 1

您有三個問題。

1. 您不會在指令rh-portfolio-image中傳遞參數。如ID，一個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>

附：在標籤<div ng-transclude></div>中包含指令rhPortfolioIm。