Directives for Nested Elements in AngularJS

I am currently working on creating two custom elements: <accordion> and <accordion-group-active>.

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

In addition,

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

Can you help me figure out why my output looks like this:

<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>

When I am expecting it to look like this:

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

Thank you for your assistance.

javascriptangularjs

Answer №1

Just a couple of points to note:

  1. Make sure to use camelCase instead of hyphens in your JavaScript code. For example, change .directive('accordion-active-group') to .directive('accordionActiveGroup')

  2. Don't forget to include the ng-transclude directive in the template of your second directive. This is essential for Angular to correctly place your transcluded content.

Answer №2

/*directive for graph visualization*/
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);
    }
}
}]);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible that ng-click gets filtered out by Angular's ng-bind-html?

I am currently working with HTML data that I am importing from a JSON file. To display this HTML data in my application, I am utilizing ngSanitize along with ng-bind-html. My goal is to transform any standard links in the JSON blob from: <a href="so ...

angularjs

handle an exception within the initializer of its object

I'm currently working with an Ajax object that is utilized in various other objects to load 'Json' files. One issue I'm facing is trying to catch the 404 'Not found' exception thrown in the initializer object. However, every ...

javascriptexception

Is the functionality of `Promise.all` affected by the browser's restriction on concurrent connections?

Suppose an api server is utilizing HTTP/1.1 and the browser has a maximum of 6 concurrent TCP connections per domain. If I make 7 api calls simultaneously using Promise.all, does that mean the last api call will have to wait for the response from the first ...

javascripthttphttp2

modify a column in a database table when a different field is chosen

I am working on a basic table with 4 columns, two of which are dropdown menus with the classes "ddm1" and "ddm2". Here is what I am trying to achieve: Users should not be able to select from "ddm2" until they have selected an option from "ddm1". When ...

javascriptjquery

iOS is not receiving JSON data in the response headers

I am currently utilizing the CocoaHTTPServer for establishing my server connection. However, I encountered an issue with retrieving JSON data in the header file of my HTML page (web client). Here is the code snippet : HTML Page : endAPSession: funct ...

javascriptjqueryhtmliosjson

Having trouble getting a Mocha test to display two decimal places in Javascript? Both Big and Decimal libraries are causing issues

After encountering an error with the Big library, I decided to switch to Decimal. First, I ran npm install Decimal Then, I added the following code: const Decimal = require('decimal'); Even after following the examples, my comparison returned { ...

javascriptnpmmocha.jsdecimal

Guide on how to perform a POST request within a service worker?

I am faced with the challenge of sending a POST request to the back-end every time a client clicks on a Push notification from the front-end, in order to confirm that the client has received the notification. Here is the system I currently have in place f ...

javascriptnode.jsvue.jspostworkbox

What causes the scrollbar to not extend to the bottom when connected to another scrollbar via a JavaScript equation?

I have been working on a code that involves multiple scrollbars that are all linked together. When you move one scrollbar, the other two will move proportionally. However, due to differences in width, the scroller doesn't always reach the end of the s ...

javascripthtmlcss

inquiry on php function properties

I have a PHP file containing two functions. <?php function first () { //in real case more conditions echo "first"; return true; } function second () { //in real case more conditions echo "second"; return true; } first(); second(); ?> And in an ...

phpjavascriptjqueryajax

Invoking a .js file within an UpdatePanel from the CodeBehind

I have been dedicating my time to self-teach ASP.NET and JavaScript for a project, and I've hit a roadblock that has consumed dozens of hours. After discovering a fantastic drag-and-drop JavaScript list online, I copied the provided source code and o ...

javascriptasp.netvb.netupdatepanelcode-behind

Guide for creating a function that accepts an array containing multiple arrays as input

I am working with a function called drawSnake and it is being invoked in the following manner: drawSnake( [ [0, 0], [0, 1], [0, 2], [0, 3], [0, 4], ] ); How should I format the input for this function? I have attempted using Array<Array<[numb ...

javascriptreactjstypescriptfunctiontypes

What is the best way to access the inputName element using the ng-messages directive?

Is there a way to trigger error messages without knowing the input name? Take a look at the code snippet below: <input class="form-control" id="{{field.field_id}}" set-name="{{field.field_id}}" type="text" ...

angularjs

Navigating a JSON object using jQuery

My current project involves sending a Json response to an Ajax function within my webpage. The structure of the Json response is as follows: {"one": 21, "two": 10, "three": 19, "four": 100} With this setup in place, I am now in the process of developing ...

javascriptjqueryjsonajax

Unable to execute controller due to service call testing failure

I'm currently working on writing a code to test the service call in my controller. The goal is to unit test a specific function within the controller that makes the service call and retrieves data. While I am using local JSON for testing purposes, the ...

javascriptangularjskarma-jasmine

Scaling divs proportionately using a container

I have numerous elements enclosed within a <div class="wrapper">. My aim is to resize this outer div and ensure that the inner elements scale proportionately along with it. For instance, when dealing with a group of SVGs, adjusting the transform pro ...

javascripthtmlcsssvgwrapper

Arranging items in ng-options through the use of orderBy

Here is the code I am struggling with: <select ng-model="i.br" ng-options="item.name as info[item.name] for item in e.br | orderBy:info[item.name]" class="combobox"> Unfortunately, the orderBy function is not sorting the options according to info[i ...

angularjsangularjs-orderbyng-options

Disabling the global ajax datatype causes issues with Rails remote links

I have successfully developed a rails application that submits a form remotely and then displays form validation errors if the validation process fails. The form itself is working perfectly. However, I've come across an issue where the way I've ...

javascriptjqueryruby-on-railsjsoncoffeescript

"Image Reactor: Unleashing the Power

I'm struggling to understand why my relative path image loading isn't functioning correctly. The assets are located within the src folder in my working directory, but for some reason, they're not displaying as expected. When I directly impo ...

javascriptreactjsimage

The initial setting of [opened]="true" causes an issue with the Angular Material date range picker

Recently, we completed the upgrade of our app from Angular 14 to 15.2.9, which includes Angular Material. The migration process went smoothly, and now our app is compiling and running without any errors. However, we encountered an issue with the mat-date-r ...

javascriptangularangular-material

Ways to target only the adjacent div

My goal is to target only the next div with the class name indented. Each indented div should have the same id as the <li> element right before it. Currently, I want each div with the class name indented to have the id of the previous <li>. He ...

javascripthtmljquery