AngularJS有没有办法在boostrap之后动态注册一个指令

Question

I want to dynamically load and compile a directive some time after the application is bootstrap.

Like when I press a button I want to run code similar to this:

app.directive('dynamicDirective',
    ['$compile', '$timeout', 'searchBuilderFactory',
    function ($compile, $timeout, searchBuilder) {
        return function (scope, element, attrs) {
            scope.$watch(attrs.truBindNgHtml, function (newValue, oldValue) {
                if (newValue === oldValue) return;
                var directiveName = 'advanced' + newValue;

                app.directive(directiveName, function() {
                    return {
                      template: 'Name: {{customer.name}} Address: {{customer.address}}'
                    };
                }); 

                var html = '<' + directiveName + '>' + '</' + directiveName + '>';

                element.html(html);
                $compile(element.contents())(scope);
            });
        };
}]);  

Here is a partially working example: Fiddle

Answer 1

You got it almost right, I am not exactly sure about the part in the controller which does, however you have some issues.

• Directive is registered fine, but restriction is a problem, you have element restriction which you need to be explicit about, ie use restrict:'E'

• When watching attributes, do not use scope.$watch instead use attrs.$observe , in your case attrs.$observe('dynamicDirective', fn) , or use scope binding with scope:{dynamicDirective:'@'} anc use scope.$watch('dynamicDirective', fn)

• Inorder to pass values and have it observable use interpolation when consuming the directive while using attr or scope binding with @ , if using 2 way = you do not need that.

Try:-

function ($compile) {

    return function (scope, element, attrs) {
        attrs.$observe('dynamicDirective', function (v, ov) {
            if (!v) return; //If no value do nothing
            var directiveName = 'advanced' + v;

            app.directive(directiveName, function () {
                return {
                    template: '<p>Blah</p>',
                    restrict: 'E'
                };
            });

            var newEl = '<' + directiveName + '>' + '</' + directiveName + '>';
            element.html(newEl); //or element.append(); if you want to add upon
            $compile(element.contents())(scope);

        });
    }
}]);

Plnkr