Transform Angular Directive in Vanila JavaScript function

Question

My problem is how to transfer my Angular Directive to an JavaScript function. Ben searching for a weak now with out any success.

Since I have confidentiality agreement with my employer I can't share any of my code, but I think that question is easily understood.

Can any one give me some advice?

Here is a simple example, Ill try to be clear as a beginner can be.

This is a directive:

app.directive('helloWorld', function() {
  return {
    restrict: 'AE',
    replace: true,
    template: '<p style="background-color:{{color}}">Hello World',
    link: function(scope, elem, attrs) {
      elem.bind('click', function() {
        elem.css('background-color', 'white');
        scope.$apply(function() {
          scope.color = "white";
        });
      });
      elem.bind('mouseover', function() {
        elem.css('cursor', 'pointer');
      });
    }
  };
});

What I would like to do is something like this:

function directiveWraper(scope, elem, attrs){
app.directive('helloWorld', function() {
  return {
    restrict: 'AE',
    replace: true,
    template: '<p style="background-color:{{color}}">Hello World',
    link: function(scope, elem, attrs) {
      elem.bind('click', function() {
        elem.css('background-color', 'white');
        scope.$apply(function() {
          scope.color = "white";
        });
      });
      elem.bind('mouseover', function() {
        elem.css('cursor', 'pointer');
      });
    }
  };
});
}

So I would like to wrap a directive in a javascript function, an pull all the params in that function.

I actually did not understand your question. I guess you need to give people more details. In general a directive is nothing but a javascript function, which you provide to the modules .directive method. Maybe you should rewrite your actual code into a small example and add this to your question. Then people might be able to help. — Tobi, Nov 02 '16 at 12:59
Hope this helps but can't really think of a better example, or more readable. I am new to Angular that's one of the reasons I want to pull this problem to JavaScript. — Bojan Tomić, Nov 02 '16 at 14:44
Are you trying to ask how to add a directive at runtime? If so, you may want to take a look at this answer to [Dynamically add directive in AngularJS](http://stackoverflow.com/a/15279343/691711) — zero298, Nov 02 '16 at 14:45
I don' have Angular added to this page I am trying to avoid it completely. So using Razor, but one SVG is made as a directive, I am trying to add it without adding Angular to the page? If possible. — Bojan Tomić, Nov 02 '16 at 14:47

score 0 · Accepted Answer · answered Nov 02 '16 at 15:10

So for me it looks like you are looking for is a function that takes a DOM element and applies changes to id (DOM manipulation, style or something else). What an angular directive does, is nothing but wrap changes to the dom into a container.

If you don't want to use angular.js for you code i guess best fitting would be jQuery for what you want to achieve. Actually what the directive is using is a lightweight version of jQuery.

What should do the trick for you is take everything out of the link function and replace elem with a jQuery object like this:

var $elem = $(".myclass");
$elem.bind('click', function() {
    $elem.css('background-color', 'white');
    //do something else onclick
});

$elem.bind('mouseover', function() {
    $elem.css('cursor', 'pointer');
});

You might need to do some more changes but this should lead you to the right track. And in addition you might want to call this code after the document loaded, to ensure that the element you are looking for is on the DOM.

$.ready(function(){
     //..do stuff in here after the document.ready event fired
});

Transform Angular Directive in Vanila JavaScript function

1 Answers1