CODEWITHSUNDEEP
angularjsangularjs-directive
markstewie
markstewie

Reputation: 9587

Angular.js how to build dynamic template parts using directives with isolated scope

I've got a directive... like so:

.directive('formMenuBuilderMenu', function (formMenuService) {
    return {
        templateUrl: '../../views/templates/formmenubuilder-menu-template.html',
        restrict: 'A',
        scope:{
            menu:'='
        },
        link: function postLink(scope, element, attrs) {
           // does stuff 
         } ...

It gets built dynamically using $compile whenever a new menu node is created.

        scope.menu = {//new data for menu view directive part}
        var $nodeTemplate = '<div form-menu-builder-menu menu="menu"></div>';
        var html = $compile($nodeTemplate)(scope);
        $content.append(html);

I had the impression that because I've defined a scope section in the formMenuBuilderMenu directive that this directive would have isolate scope and not be affected by new instances created

BUT this doesn't work at all!

What happens is that every time a new directive is created using $compile the scope.menu gets updated using the new value for all previous directives created, not keeping its isolated scope. Indeed logging out the scope in each directive created shows it's the same scope instance every time.

How would I do this so the directive scope remains independent and each instance has it's own scope? Is it even possible? Please let me know if further explanation is needed. I'm sure I'm going about this the wrong way so a pointer in the right direction would be appreciated.

To be clear my main objective is basically to be creating dynamic template parts using directives each with their own subset of data.

Upvotes: 2

Views: 473

Answers (1)

artur grzesiak
artur grzesiak

Reputation: 20348

Instead of:

var html = $compile($nodeTemplate)(scope);

Try this:

var html = $compile($nodeTemplate)(scope.$new());

Upvotes: 1

Related Questions