Custom directive from jQuery not loaded correctly

Question

I am trying to load -outside angular - dynamically a custom directive but the custom directive is not loaded in spite I have used $compile as the following : the custom directive is :

app.directive('mydirective',function (){
  return {
     template: '<div>Succeeded !</div>',
  }
})

and here the place I am loading dynamically the directive :

function showresultcust() {
angular.injector(['ng']).invoke(['$compile',
    function ($compile) {
        var scope = angular.element(document.getElementById("test1")).scope();
        var _html = '<div>{{name}}-</div><div mydirective >Not Succeed</div>';
        //var _html='<div >{{loaded}}</div>';
        var obj = $('#content');
        $('#content').html($compile(_html)(scope));
        // compile!!!
        $compile(obj.contents())(scope);
        scope.$digest();
        setTimeout(function () {
            scope.$apply();
        });
    }
]);
}

Please note that {{name}} in the dynamic HTML is loaded correctly, but not the custom directive. The full demo is in this 'plnkr.co' link

If you could do the correction directly in the 'plnkr' link above, I would appreciate that.

Answer 1

The code is not compiling the mydirective directive because it is not part of the ng module. Add the module that contains the directive to the dependency list of the new injector.

//NOT this   
//angular.injector(['ng']).invoke(['$compile',

//Do this
angular.injector(['ng','tumblr']).invoke(['$compile',
    function ($compile) {
        var scope = angular.element(document.getElementById("test1")).scope();
        var _html='<div>{{name}}-</div><div mydirective >Not Succeed</div>';
        $('#content').html($compile(_html)(scope));
        scope.$apply();
    }
]);
}

The angular.injector function always creates a new injector and it needs all of the dependencies in the dependency list.