Javascript 嵌套的AngularJS指令。。。我做错了什么？

所以，在过去的几个小时里，我一直在用我的头敲击键盘，试图弄清楚如何扭转这种局面：

<scope-filter label="Sort by" type="sort">  
    <scope-filter-item key="recent">Recent Activity</scope-filter-item>  
    <scope-filter-item key="influence">Influence</scope-filter-item>
    <scope-filter-item key="loyalty">Loyalty</scope-filter-item>
    <scope-filter-item key="followers">Followers</scope-filter-item>
    <scope-filter-item key="visits">Visits</scope-filter-item>
</scope-filter>

近期活动
影响
忠诚
追随者
拜访

为此：

<div>
  <label>Sort By:</label>
  <ul>
    <li>Recent Activity</li>
    <li>Influence</li>
    <li>Loyalty</li>
    <li>Followers</li>
    <li>Visits</li>
  </ul>
</div>

排序方式：

近期活动
影响
忠诚
追随者
拜访

使用此选项：

出于某种奇怪的原因，

scope filter项

条目只有在

scope filter.html

模板中包含

时才会被处理并与

scope filter

关联

这个指令还有很多事情要做，但为了保持简单，我只提取所有与实际问题无关的不必要的东西

从我所读到的指令来看，您应该能够使用

require:'^thingToRequire'

语法将控制器从父级传递给子级。然后应将父控制器注入子控制器

链接

方法

我不太清楚这里发生了什么。对不起，我现在更像是一个棱角分明的新手，这对我来说是一种巫毒/黑魔法

---

任何帮助都将不胜感激

看看这是否是您想要的：

HTML

<script type="text/ng-template" id="scope-filter.html">
  <div>
    <label>{{ label }}:</label>            
      <ul ng-transclude></ul>           
  </div>
</script>

<script type="text/ng-template" id="scope-filter.html">
    <div>
        <label>{{ label }}:</label>
        <ul>
            <li ng-repeat="item in items">{{ item.key }}</li>
        </ul>
    </div>
</script>

{{label}}：

Javascript

sandbox.directive('scopeFilterItem', function () {
  return {
    restrict: 'E',
    require: '^scopeFilter',
    transclude: true,
    template: '<li ng-transclude></li>',
    link: function (scope, iElement, iAttrs, scopeFilter) {
        scopeFilter.addScopeFilterItem(iAttrs.key)
    }
  }
});

sandbox.directive('scopeFilter', function () {
    return {
        transclude: true,
        replace: true,
        restrict: 'E',
        templateUrl: 'scope-filter.html',
        scope: {
            label: '@label',
            type: '@type'
        },
        controller: function ($scope, $transclude) {
            $scope.items = [];
            $transclude(function (clone) {
                angular.forEach(clone, function(item) {
                    if (item.tagName !== "SCOPE-FILTER-ITEM") return;
                    $scope.items.push({
                        key: item.getAttribute("key"),
                        value: item.innerText
                    });
                });
            });
        }
    }
})

沙盒指令（'scopeFilterItem'，函数（）{ 返回{ 限制：'E'， 要求：“^scopeFilter”， 是的， 模板：“

”， 链接：功能（范围、IELENT、iAttrs、范围过滤器）{ scopeFilter.addScopeFilterItem（iAttrs.key） } } }); jsFiddle

我从

addScopeFilterItem

中删除了

value

参数，因为在本例中不需要它。如果出于某种原因需要它，我建议您向

scopeFilterItem

-

value

，添加一个新属性，然后从中获取它

最后，您需要使用转换，这样Angular就不会丢弃

标记的内容。检查一下这个小脚本，注意只有在启用转换的情况下才能呈现指令的内容

作用域筛选器项项仅正在处理并与关联 范围筛选器（如果我在 scope-filter.html模板

范围筛选器项

在DOM中任何位置都不存在的情况下不会调用链接函数。ng transclude所做的是编译整个

范围过滤器

，并将其插入DOM，从而使代码正常工作

根据您想要实现的目标，有几个选项：

听从迈克尔·本福德的建议

以其他方式提供数据，而不是

范围筛选器项

标记。例如，通过

ng model

指令公开items对象。这会更容易，但我不知道你的决定背后的原因，所以这可能不适合

删除

scopeFilterItem

指令，并通过

scopeFilter

中的手动转换获取项目

JavaScript

sandbox.directive('scopeFilterItem', function () {
  return {
    restrict: 'E',
    require: '^scopeFilter',
    transclude: true,
    template: '<li ng-transclude></li>',
    link: function (scope, iElement, iAttrs, scopeFilter) {
        scopeFilter.addScopeFilterItem(iAttrs.key)
    }
  }
});

sandbox.directive('scopeFilter', function () {
    return {
        transclude: true,
        replace: true,
        restrict: 'E',
        templateUrl: 'scope-filter.html',
        scope: {
            label: '@label',
            type: '@type'
        },
        controller: function ($scope, $transclude) {
            $scope.items = [];
            $transclude(function (clone) {
                angular.forEach(clone, function(item) {
                    if (item.tagName !== "SCOPE-FILTER-ITEM") return;
                    $scope.items.push({
                        key: item.getAttribute("key"),
                        value: item.innerText
                    });
                });
            });
        }
    }
})

HTML

<script type="text/ng-template" id="scope-filter.html">
  <div>
    <label>{{ label }}:</label>            
      <ul ng-transclude></ul>           
  </div>
</script>

<script type="text/ng-template" id="scope-filter.html">
    <div>
        <label>{{ label }}:</label>
        <ul>
            <li ng-repeat="item in items">{{ item.key }}</li>
        </ul>
    </div>
</script>

{{label}}：

{{item.key}

---

提供了几个转换示例，您可能会发现它很有用。

那么您正在尝试筛选列表并希望能够切换筛选器类型？如果是这样，

ng开关

将对您正常工作：嘎！太近了！这就成功了，伙计！仍在尝试在这些水域航行，但你确实帮了忙！非常感谢！