嵌套的AngularJS指令…我在這里做錯了什么？

Question

因此，在過去的幾個小時中，我一直在用鍵盤敲打我的頭，以試圖找出解決方法：

<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>

使用這個： http ： //jsfiddle.net/qBnDF/14/

出於某種奇怪的原因，如果我在scope-filter.html模板中<div ng-transclude></div> ，則只會處理scope-filter-item條目並將其與scope-filter關聯。

該指令還有很多其他事情要做，但是為了簡單起見，我將提取與實際問題無關的所有不必要的東西。

根據我對指令的了解，您應該可以使用require: '^thingToRequire'語法將控制器從父級傳遞給子級。 然后，這應將父控制器注入到子控制器link方法中。

不太確定這是怎么回事。 抱歉，目前我還是一個新手，這對我來說是一種巫毒/黑魔法。

任何幫助將不勝感激！

Answer 1

看看這是否是您想要的：

HTML

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

使用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)
    }
  }
});

jsFiddle 在這里 。

我從addScopeFilterItem刪除了value參數，因為在此示例中不需要該參數。 如果您需要回去出於某種原因，我建議你添加一個新的屬性scopeFilterItem - value ，也許-並從那里得到它。

最后，您需要使用包含，以便Angular不會丟棄<scope-filter>標記的內容。 簽出這個小jsFiddle腳本，注意只有啟用了包含，該指令的內容才會呈現。

Answer 2

如果我包含在scope-filter.html模板中，則只會處理scope-filter-item條目並將其與scope-filter關聯

scope-filter-item不會在DOM中不存在的情況下調用鏈接功能。 ng-transclude所做的是編譯整個scope-filter並將其插入到DOM中，從而使代碼起作用。

根據您要實現的目標，有幾種選擇：

1. 遵循邁克爾·本福德的建議。
2. 以其他方式提供數據，而不是scope-filter-item標簽。 例如，通過ng-model指令公開items對象。 這樣會比較容易，但是我不知道您做出決定的原因，因此這可能不合適。
3. 刪除scopeFilterItem指令，並通過手動包含在scopeFilter 。

工作示例 。

JavaScript的

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>
            <li ng-repeat="item in items">{{ item.key }}</li>
        </ul>
    </div>
</script>

本文提供了幾個包含示例，您可能會發現它很有用。