angularjs-动态更新指令后重新加载页面上的所有指令

Question

I have a bunch of directives in an html page, let's say the directive is <my-directive></my-directive> . These directives are added or changed outside of AngularJS , eg a jQuery function will simply append a new <my-directive></my-directive> to the page.

Here's my question - after appending the new <my-directive></my-directive> , the directive doesn't actually do anything - it's just a tag without any functionality.

How can I force Angular to recognize that a new tag has been added? I've tried mucking around with scope.apply but haven't had any luck.

Thanks!

Answer 1

I think you're looking for angulars $compile method:

myApp.directive('addonclick', function($compile){
    return {
        restrict: 'A',
        link: function(scope, element, attrs){   
            var html = attrs.addonclick; //or something else     
            element.on("click", function(){
                $(element).append($compile(html)(scope));
            })
        };
    };
});

EDIT:

Try getting the scope first:

var scope = angular.element("yourElement").scope();

Then get and call the compile service:

var compile = angular.element("yourElement").injector().get("$compile"); //or
var compile = angular.injector(["moduleName"]).get("$compile");
$("yourElement").append(compile("<my-directive/>")(scope));