缺少指令

Question

我正在尝试使用angularJS将我的菜单从js指令转到我的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

如果您使用angular的模板功能而不是尝试将html连接在一起，那么您将为自己省去很多麻烦。

将模板设置为类似的内容（或使用templateUrl

加载模板

<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;
            };
        }
    }
}]);

编辑：如果你正在使用Bootstrap，你也可以从AngularUI团队this出来。