Question

这是一个很容易回答的问题。

我写了几个基本上都是控件的指令。我想编写另一个管理这些控件集合的指令。

我所学到的是，我需要一个要绑定到的数据数组，每个数据都代表每个子指令的数据。

我不确定的是我将如何实现它。例如，您是否必须为添加的每个新控件手动编译html，或者这是否需要处理？

我已经看过人们在链接功能中使用$compile的示例，但看起来并不正确，除非您因某种原因需要手动编译。

此外，每个子指令都会呈现一个允许从父集合中删除自身的按钮。有没有办法将函数绑定到父控制器？

编辑：

正如所建议的，这是我正在做的事情的基础。它现在不工作，所以考虑在链接函数中构建HTML并调用$compile

.directive('fsFilterCollection', function ($compile) {
    return {
        restrict: 'AE',        
        priority: 1002,
        scope: {
            filters: "=",
            filterClosedFn: '&'
        },
        controller: function ($scope, $element) {              
            $scope.filterClosedFn = function (filterdata) {
                console.log("filter closed")
            }
        },
        template: function (element, attr) {
            return  '<div>'+
                    '   <div ng-repeat="filter in filters">'+
                    '     <div>',
                    '          <div fs-dummy-filter keepopen="true" filter-closed-fn="filterClosedFn()" filterdata="item.filterdata" fs-filter actions="true" filter-type="item.filterType"></div>' +
                    '       </div>'+
                    '   </div>'+
                    '</div>'
        },
        link: function (scope, element, attrs, ngModelController) {
            console.log(scope.filters);
        }
    }
})

.directive('fsDummyFilter', function ($compile) {

    return {
        restrict: 'AE',     
        priority: 1001,
        scope: {
            isopen: '=',  
            filterdata: "=",
            filterClosedFn: '&'
        },
        controller: function ($scope, $element) {
        },
        template: function (element, attr) {
            return '<div>{{filterdata.filterType}}<button ng-click="filter-closed-fn()(filterdata)">Close</button></div>';
        },
        link: function (scope, element, attrs, ngModelController) {
        }
    }
})

HTML

<div fs-filter-collection filters="filters"></div>

并且其控制器定义：

$scope.filters = [
    { filterType:"String" }
];

我遇到的问题是filterCollection指令没有呈现子指令。我已经检查了链接函数中filters的值，它们是从父控制器设置的。

Answer 1

我的坏。我使用item.filterType的模板应该是filter.filterType

角度报告没有错误导致调试困难，但可能对某人有帮助。

无论如何，感谢您的评论！

AngularJS - 管理指令集合的指令未被绑定/呈现

1 个答案: