Question

我正在尝试构建2个元素：<accordion>和<accordion-group-active>。

.directive('accordion', function () {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        template: "<div class=\"accordion\" ng-transclude>  \
                   </div>"
    }
})

和

.directive('accordion-active-group', function() {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        template: "<div class=\"title\" > \
                     <i class=\"dropdown icon\"></i> \
                     {{heading}} \
                   </div>"
    }
})

我为什么会这样：

<div class="accordion">
    <accordion-active-group class="ng-scope">test</accordion-active-group>
    <accordion-active-group class="ng-scope">test2</accordion-active-group>
    <accordion-active-group class="ng-scope">test3</accordion-active-group>
</div>

相反：

<div class="accordion">
    <div> ... </div>
    <div> ... </div>
    <div> ... </div>
</div>

谢谢。

Answer 1

两件事：

在javascript中使用camelCase，而不是连字符。所以.directive（'accordion-active-group'）应该是.directive（'accordionActiveGroup'）
您在第二个指令的模板中缺少ng-transclude指令。 Angular不知道在哪里放置您的被抄送的内容。

Answer 2

/*activity*/
actApp.directive('graph3p', ['composite', 'component', function (composite, component) {
return {
    restrict: 'AE',
    replace: true,
    transclude: true,
    template: "div class='graph3p' ng-transclude></div>",

    link: function ($scope, $element, $attrs) {

        //Add the element to the main components collection
        $scope.components.push($element);
        $element.html($scope.asset);
        var _svgObj = $element[0].getElementsByTagName("svg")[0];
        var resolvedText;
        var actDataArr= [];

        for(var i = 0; i <= 19; i++){
            resolvedText = composite.resolve($scope, "data["+i+"]");
            actDataArr = resolvedText.split(",")
            $attrs.cx = actDataArr[0]
            $attrs.cy = actDataArr[1]

            var circle = document.createElementNS("http://www.w3.org/2000/svg",'circle');

            circle.setAttribute('id',"cir" + i);
            circle.setAttribute('cx',$attrs.cx);
            circle.setAttribute('cy',$attrs.cy);
            circle.setAttribute('r',2);
            circle.setAttribute('fill','#FF0000');
            circle.setAttribute('stroke','#FF0000');
            circle.setAttribute('stroke-width',0.8);
            circle.setAttribute('stroke-miterlimit',10);
            _svgObj.appendChild(circle);
        }
        component.position($scope, $element, $attrs);
        component.size($scope, $element, $attrs);
    }
}
}]);

Angularjs嵌套元素指令

2 个答案: