ディレクティブの属性がありません

Question

私はjsディレクティブからangularJSのhtmlファイルにメニューを取得しようとしています。

しかし、私はデータトグル、データ親、または任意のIDのような属性をすべて取得しません。これらのタグがありません。

data-toggle="collapse" 

data-parent="#accordion2" 

id="collapseTwo" 

申し訳ありませんイム不明であれば、私はそれが良いように私ができるように説明しようとしました。

私のjs

directives.directive('productTree', ['$compile','$rootScope', function($compile, $rootScope){ 
     return { 
     scope: { 
      items: "=", 
      linkPath : "=" 
     }, 
    template: '<div ng-bind-html="tree"></div>', 
    replace: true, 
    link: function (scope) { 

     var makeTree = function(categories) { 
      var tree; 
      var generateNode = function(category, index) { 
       var children = category.Children.map(function (item, index) { 
        var childrens = ""; 
        childrens += generateSubNode(item, index) 
        return childrens 
       }) 


       var main = ""; 
       main += "<div class=\"accordion-group\">"; 
        main += "<div class=\"accordion-heading\">"; 
         main += "<a class=\"accordion-toggle\" data-toggle=\"collapse\" href=\"#menu-" + category.Item.Id + "\">" + category.Item.Name + "</a>"; 
        main += "</div>"; 
        main += (children.length ? "<div id=\"menu-" + category.Item.Id + "\" class=\"accordion-body collapse\"><div class=\"accordion-inner\">" + children.join("") + "</div></div>" : ""); 
       main += "</div>"; 


       return main; 
      } 

      var generateSubNode = function (category, index) { 
       return '<a href="' + scope.linkPath + '/catalog/browse/' + category.Item.URIPath + '">' + category.Item.Name + '</a>'; 
      } 



      tree = categories.map(function(category, index){ 
       return generateNode(category, index); 
      }); 
      return tree.join(""); 
     } 

     scope.tree = makeTree(scope.items); 


    } 
    } 
}]) 

マイHTML

<div class="accordion" product-tree items="shop.Menu" link-path="paths.linkPath"> 
</div> 

私の出力は

<div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a class="accordion-toggle" href="#menu-162">Genvägar</a> 
    </div> 
    <div class="accordion-body collapse"> 
     <div class="accordion-inner"> 
     <a href="/catalog/browse/shortcuts/black_friday_2016/">Black Friday 2016</a> 
     <a href="/catalog/browse/shortcuts/black_friday_iphone_6s_64gb_prissankt/">Black Friday: iPhone 6S 64GB Prissänkt!</a> 
     <a href="/catalog/browse/shortcuts/blatandshorlurar/">Blåtandshörlurar</a> 
     <a href="/catalog/browse/shortcuts/iphone_7_7_plus/">iPhone 7/7 Plus</a> 
     </div> 
    </div> 
</div> 

これは、私はそれになりたい方法です

<div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> 
      Rubrik 1 
     </a> 
    </div> 
    <div id="collapseOne" class="accordion-body collapse"> 
     <div class="accordion-inner"> 
     <a href="/catalog/browse/shortcuts/black_friday_2016/">Black Friday 2016</a> 
    <a href="/catalog/browse/shortcuts/black_friday_iphone_6s_64gb_prissankt/">Black Friday: iPhone 6S 64GB Prissänkt!</a> 
    <a href="/catalog/browse/shortcuts/blatandshorlurar/">Blåtandshörlurar</a> 
    <a href="/catalog/browse/shortcuts/iphone_7_7_plus/">iPhone 7/7 Plus</a> 
     </div> 
    </div> 
</div> 

Answer 1

htmlを1つずつ連結するのではなく、角のテンプレート機能を使用すると、多くの問題を解決できます。

<div class="accordion-group" ng-repeat="category in items"> 
    <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" ng-click="toggle()"> 
      {{ category.Item.Name }} 
     </a> 
    </div> 
    <div ng-hide="collapsed" class="accordion-body collapse"> 
     <div class="accordion-inner"> 
     <a ng-repeat="child in category.children" href="{{linkPath}}/catalog/browse/shortcuts/{{ child.Item.URIPath }}/">{{ child.Item.Name }}</a> 
     </div> 
    </div> 
</div> 

そこで、このような何かにあなたのディレクティブを変更します：

directives.directive('productTree', ['$compile','$rootScope', function($compile, $rootScope){ 
    return { 
     scope: { 
      items: "=", 
      linkPath : "=" 
     }, 
     template: 'the template above (or use templateUrl)', 
     replace: true, 
     link: function (scope) { 
      scope.collapsed = true; 
      scope.toggle = function(){ 
       scope.collapsed = !scope.collapsed; 
      }; 
     } 
    } 
}]); 

が編集：このような何かにあなたのテンプレートを設定します（またはtemplateUrlを使用して、それをロード

あなたが使用している場合は、ブートストラップの場合は、AngularUIチームからthisも出てくるかもしれません。