Add angularjs directive to a native html element (input text, div, span etc)?

Question

I have something like this -

<input type="text" value="" title="Title"> ...

How can I add my custom directive as attribute to the existing html element on the page, let's say - directive as categoryLookup -

<input type="text" value="" title="Title" category-lookup> ...

I need to do this dynamically on page load, i.e make the input text behave per directive logic.

Thanks in advance.

Answer 1

You can do this with leveraging $compile after targeting your element. I added an id and used vanilla JS in this example, but you may have more at your disposal e.g. jQuery. After you have your element, just $compile it in your associated controller. Observe the following example...

<div ng-app="app" ng-controller="ctrl">
    <input id="myInput" type="text" title="Title"> 
</div>

---

angular.module('app', [])
.controller('ctrl', function($scope, $compile) {
    $compile(angular.element(document.getElementById('myInput')).attr('category-lookup', 'category-lookup'))($scope)
})
.directive('categoryLookup', function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
            console.log('directive registered')
        }
    }
});

JSFiddle Link - demo

---

Also, "dynamically on page load" can mean a few things. I assumed you are in a fully fleshed out AngularJS ecosystem, but there does exist the notion that you do not even have a controller and need to somehow cherrypick this directive and compile it on "load". Here is a nitty gritty example how you can do so, though, it's generally regarded as a bad practice, and instead leveraging the above logic in an associated controller is preferable. Observe the following...

<div ng-app="app">
    <input id="myInput" type="text" value="" title="Title"> 
</div>

---

angular.element(document).ready(function () {

    var $injector = angular.injector(['ng', 'app']);

    $injector.invoke(function($rootScope, $compile) {
        $compile(angular.element(document.getElementById('myInput')).attr('category-lookup', 'category-lookup'))($rootScope)
    });
});

JSFiddle Link - demo - no controller