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

Question

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

875 Views Asked by gj2110 At 25 January 2018 at 10:03

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.

Original Q&A

There are 1 best solutions below

**Maher** · Answer 1 · 2018-01-25T10:33:53.267000

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>

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

There are 1 best solutions below

Related Questions in ANGULARJS

Related Questions in ANGULARJS-DIRECTIVE

Related Questions in ANGULARJS-FACTORY

Trending Questions

Popular # Hahtags

Popular Questions