angularjs - create instance of directive at runtime?

Question

i'm working on a formbuilder and would like to be able to dynamically create instances of my directives at runtime.

I've got all of the functionality working, except the rendering. I can render an instance through $compile, but when i try adding some internal functionality in the directive, it does not resolve the binding ?

My Directive

.directive('formElType', function ($compile) {
    var txt_label = 'Please type your text here';

    return {
        restrict: 'E',
        replace: true,
        scope: {
            txt_label: '=',
        },
        template: '<div class="fbuild-playground-el-wrap" ng-click="openSettings($event)">' +
                    '<div class="fbuild-playground-el">' +
                        '<p>{{ txt_label }}</p>' +
                    '</div>' +
                '</div>',
        link: function (scope, elem, attrs) {
            scope.txt_label = txt_label;

            $compile(elem.contents())(scope);
        }
    };
});

Javascript Code that renders the directive

$scope.componentDrop = function(e) {
    angular.element(
        $compile('<form-el-type></form-el-type>')()
    ).appendTo($scope.comp_dropzone);
};

Peter Vermeulen · Accepted Answer · 2015-03-19 09:47:21Z

1

i found the solution to my own question after digging deep into the way directives are rendered.

Because the compilation is done before the linking/controller functions are executed, the values aren't updated until the next cycle of angular's renderer.

There is an override in the form of scope.$apply();

So all i needed to do was

link: function (scope, elem, attrs) {
    scope.txt_label = txt_label;

    scope.$apply();
}

If any of you want to learn more about this, i suggest you read : http://jimhoskins.com/2012/12/17/angularjs-and-apply.html :]

answered Mar 19, 2015 at 9:47

Peter Vermeulen

313 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angularjs - create instance of directive at runtime?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related