Angular js - How to call directive after creating the directive dynamically?

Question

So what I'm doing is adding a directive as an attribute to an element via a Factory. And I have a separate directive file that manipulates the DOM based on some event triggered on that element, the element being the one with newly added directive as an attribute. Now the thing that's happening is the directive file gets called first it searches the DOM doesn't find the directive tag. The factory called after directive successfully adds the attribute to DOM element but the problem is that attribute isn't recognised as a directive, it just assumes it to be a simple element attribute. Now what I want is the directive file to traverse the DOM again so that this time it can find the directive as an attribute tag and manipulate the DOM accordingly.

The naive version of the code is as follows:

index.html-

<html ng-app='myApp'>
    <body ng-controller='myController'>
        <div id="demo">
            Clicking here should console Hola!!
        <div>
        //Script tags for all the 3 files above
    </body>
</html>>

Controller File-

namespace angular {
var app = angular.module('myApp');
app.controller('myController', myController);

export class myController {
    static $inject = ['myFactory'];
    constructor(private myFactory: any) {
        this.myFactory = myFactory;
        console.log('myController Constructor Called');
    }
}}

Factory File-

namespace angular {
var app = angular.module('myApp');

app.factory('myFactory', function () {
    var node = document.getElementById("demo");;
    node.setAttribute("directive-tag", "");
    return "";
}); }

Directive File-

namespace std{
var app = angular.module('myApp', []);

app.directive('directive-tag', function () {
    return {
        restrict: 'E',
        link: function (scope, element, attribute) {
            console.log('Hola!');
        }
    };
}); }

PS : All this should happen on page load.

Any help would be appreciated!! Thanks in advance.

Can you post some code so we have some idea of what you have? — rrd
– rrd, Commented Jan 25, 2018 at 10:04

Maher · Accepted Answer · 2018-01-25 10:44:30Z

0

In your codes replace 'directive-tag' directive name with 'directiveTag' and then use it as directive-tag in your html codes.

In this sample, you can see we use $compile to define attribute in angularjs, here we set attributes from controller, you can change it everywhere you want.

var app = angular.module("app", []);

app.controller("ctrl", function ($scope, factory) {
    factory.addAtrr("#test", "class", "test");
    factory.addAtrr("#test", "value", 123);
    factory.addAtrr("#test", "object", JSON.stringify({ value: 555 }));
})

app.factory("factory", function ($rootScope, $compile) {
    var object = {};

    object.addAtrr = function (target, key, value) {
        var element = angular.element(document.querySelector(target));
        element.attr(key, value);
        $compile(element)($rootScope);
    }

    return object;
})

app.directive("test", function () {
    return {
        restrict: 'C',
        scope: {
            value: "@",
            object: "=",
        },
        link: function (scope, el, attr) {
            scope.$watch("value", function (newValue, oldValue) {
                if (angular.isDefined(newValue)) {
                    console.log(newValue)
                }
            })
            scope.$watch("object", function (newValue, oldValue) {
                if (angular.isDefined(newValue)) {
                    console.log(newValue)
                }
            })
        }
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">

    <div id="test">
        test
    </div>
</div>

edited Jan 25, 2018 at 10:44

answered Jan 25, 2018 at 10:33

Maher

2,5471 gold badge21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

gj2110 Over a year ago

This works fine. Actually the thing is here you see you have the class="test" from the very beginning. What I want is to add directive-tag to the div using Factory and then have a directive called like app.directive('directive-tag') that would manipulate DOM cause in the near future I would want to add this directive to elements who don't have this predefined class attribute in them and ya the directive-tag is just a typo I've used directiveTag in the actual code. PS: just attached the code above. Hope it's understandable, refer it if you may.

Maher Over a year ago

no i remove it see the codes again, because when i post the answer you updated the question

gj2110 Over a year ago

yeah you do add an attribute to that div. But that is treated only as an attribute not as a directive, now to manipulate DOM I'll have to refer the test directive but I don't want that. I want the newly added attribute to act as a directive instead of an attribute. I hope I'm making sense.

Collectives™ on Stack Overflow

Angular js - How to call directive after creating the directive dynamically?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related