Loading templates at run-time with controllers using directives

[mark goldin]

I have the following code:

<div case-editor>        

 </div>    

and directive:

prismDirectives.directive("caseEditor", function ($templateRequest, $compile, $controller, $rootScope) {

    return {

        link: function (scope, elem, attrs) {

            $templateRequest("template.html").then(function (html) {

                var template = angular.element(html);

                $(elem).append(template);

                template = $compile(template)(scope);

            });

        }

    };

})

template:

<span ng-controller="aController" ng-bind="test"></span>

controller:

app.controller('aController', function () {
   $scope.test = '123456';
}

No data is shown.

So my question is: how do we dynamically load templates and have their controllers actually being loaded?

Mine is not even loaded.

Thanks

[Sander Elias]

Hi Mark,

2 things. First compile your template before adding it to the dom. Second, inject $scope into your controller if you want to use it. Also, make sure your controller is loaded and executed before you try to compile your template.

Regards

Sander

[mark goldin]

Can you show please how to do second thing?

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/OY9hODyW7jM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Sander Elias]

Injecting the scope?

app.controller('aController',
   ['$scope',
    function ($scope) {
        $scope.test = '123456';
    }]);

Or compiling the template before adding it to the dom?

        link: function (scope, elem, attrs) {
            $templateRequest("template.html").then(function (html) {

                template = $compile(html)(scope);
                elem.append(template);
            });
        }

Is that what you are looking for?

Regards

Sander

[mark goldin]

Here is my directive:

a.directive("popupWindowContent", function ($templateRequest, $compile) {

    return {

        scope: {},

        controller: "@",

        name: "controllerName",

        link: function (scope, elem, attrs) {

            scope.data = JSON.parse(attrs.data.replace(/\*/g, '"'));

            $templateRequest(attrs.template).then(function (html) {

                var template = angular.element(html);

                $(elem).append(template);

                template = $compile(template) (scope);

            });

        }

    };

});

Markup:

<div popup-window-content controller-name="templateController"></div>

What I am trying to do is to load a template and its controller at the run time. The code basically works. My problem is I need to have scope.data defined before the controller loads, but that is not happening.