Angularjs 嵌套指令，无模板，但在父指令中为ng repeat

我试图解释我的问题：

我有一个自定义指令，它包含一个元素列表（此时元素是自定义指令，但我不知道它是否正确）。 对于每个元素，我需要获取一些值并将这些值放在parent指令中，其中有两个不同的ng repeat。 也许有人认为我应该在嵌套指令中使用这些值，在父指令中使用ng TRANCLUDE。但我不能，因为嵌套指令应该有两个不同的模板。 可能不清楚，所以我让您看看我的代码：

Index.html（我使用指令的地方）

最后，指令的模板

...
<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重复。在两个ng repeat之间，有一个代码不应该重复，因此它意味着，在任何情况下都必须在父指令内

无论如何，我的代码不起作用。。。我都不明白为什么。。perhpas，因为尝试使用父级控制器中定义的“image”元素的属性，但它是从嵌套指令填充的

编辑 在这里你可以看到问题。。在页面的底部，您应该看到公文包，以及图片。。。但有些东西不起作用：

在这里，您可以看到没有Angularjs的VersionOne（因此，我希望看到的是）：

EDIT2 这里有一个Plunker版本

有人能帮我吗？

---

thanx你有三个问题

您不能在指令

rh portfolio image

中传递参数。例如id，一个URL等

您的指令

rh portfolio image

不调用，因为指令

rh portfolio

具有属性

replace:true

您不使用

transclude:true

。更多细节

我正在更改您的模板

portfolio.html

。请查收。这不是“完成”解决方案，但它向您展示了如何创建指令

var renovahaus=angular.module（“renovahaus”，[]）
.指令（'rhPortfolio'，函数（）{
返回{
限制：'E'，
替换：正确，
是的，
模板：“images={{images | json}}}”，
作用域：{}，
控制器：['$scope'，函数（$scope）{
var images=$scope.images=[]；
$scope.select=函数（图像）{
角度。forEach（图像，函数（图像）{
image.selected=false；
});
image.selected=true；
};
this.addImage=函数（图像）{
如果（image.length==0）{
$scope.select（图像）；
}
图像。推送（图像）；
};
}]
};
})
.指令（'rhPortfolioImage'，函数（）{
返回{
限制：'E'，
//替换：正确，
要求：“^rhPortfolio”，
作用域：{id:=“}，
模板：{{id}}，
链接：函数（范围、元素、属性、portfolioCtrl）{
控制台日志（1）；
portfolioCtrl.addImage（范围）；
}
};
}).指令（'rhPortfolioIm'，函数（）{
返回{
限制：'E'，
作用域：{id:@}，
要求：“^rhPortfolio”，
模板：{{id}}，
链接：函数（范围、元素、属性、portfolioCtrl）{
portfolioCtrl.addImage（范围）；
}
};
});

引导HTML5 CSS3主题
“不工作”不是一个恰当的问题陈述，它不能为任何人提供任何真正的故障排除信息。这可能意味着从空白页到小细节。用所有相关的调试细节和演示更新问题也会很有帮助，这很难解释。。我看不到图像。。。从Chrome的“开发者工具”中，我看到了这个错误：
加载资源失败：服务器响应状态为404（未找到）
http://localhost:2060/%7B%7B%20image.url%20%7D%7D
其中
image.url
是从directiveWait的模板中可以看到的角度，我试图发布该网站，以便您可以看到我的指令的效果。。然而，我认为我认为指令的方式是完全错误的，如果你想让人们能够帮助改变fork代码，一个简单的演示会更好我编辑了我的问题。。我把一个链接，你可以直接看到我的网站上的错误做。同时，我将尝试在plunker上做一个演示。
.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>
...