Question

我正在尝试通过单击元素创建一个递归填充数据（通过$ http加载）的Angular Directive。一开始应该只有一个按钮。单击该按钮后，将通过$ http从远程源加载数据，该指令的新实例将创建，编译并附加到每个子项的父实例。这些儿童指令也是按钮，应该加载并将他们的孩子的数据附加到他们身上，即孙子们嵌入儿童的“儿童”中。指令等等。

下面的代码正确加载并附加第一个子项，但单击附加的指令将创建附加到 root 指令的新指令。似乎element.append（）总是引用根。

有人知道我在哪里出错吗？

app.directive('sectionloader',['$compile', 'sectionService', '$http', 
    function($compile, sectionService, $http){

    return  {
        restrict : 'E',
        template: '<button>loadSection</button><br>',
        scope : {sectionId:'@'}, 
        terminal: false,
        link: function link(scope, element, attrs) {
            element.bind('click', function(){
                sectionService.loadBySectionId(attrs.sectionId, function(data){
                    var sectionHtmlLocation = "http://remoteserver/sectionhtml.html"
                    scope.section=data;
                    scope.subsections = [];
                    data.subsections.forEach(function(id){
                        sectionService.loadBySectionId(id,function(data){
                            scope.subsections.push(data);
                        });
                    });
                    $http.get(sectionHtmlLocation).success(function(data){
                    var compiledData = $compile(data)(scope.$new());
                    element.append(compiledData);

                    });
                });
            });
        }
    }
}]);

编译和附加的模板是：

<div class="subsections">
    <ul>
        <li ng-repeat="subsection in subsections">
            {{subsection.sectionName}}
            <sectionloader sectionid="{{subsection.sectionId}}"></sectionloader>
        </li>
    <ul>
</div>

Answer 1

看看你如何绑定你的碰撞事件。您可能没有在预期的来源捕获事件，然后它会向上传播到父级...

用bind替换ng-click来电可以解决问题。

<button ng-click="load();">loadSection</button>

然后在范围上声明加载......

   $scope.load = function(){
       ...
   }

单击时递归添加新指令实例

1 个答案: