I have an html file with a controller and a directive with a template url. I want to load/compile the directive conditionally in the controller:

Controller:

app.controller('TestController', function TestController($http, $scope, $compile) { $scope.loadData = function (pageId) { var pUrl = 
      
        $http({ method: 'GET', url: pUrl }).success(function (data, status) { $scope.pData = data; var htm = '
       '; var elm = angular.element("#id").append(htm); $compile(elm)($scope); }).error(function (data, status) { alert('error'); }); }; $scope.loadData(); });
      

Directive:

'use strict';app.directive('testdirective', function ($http) { var uDirective = {}; uDirective.restrict = 'E'; uDirective.templateUrl = 'js/directives/testdirective.html'; uDirective.controller = function ($scope, $element, $attrs) { $scope.showDirectiveData(); $scope.showDirectiveData = function () { $scope.directiveDataCollection = 
      
       ; }; }; uDirective.compile = function (element, attributes) { // do one-time configuration of element. var linkFunction = function ($scope, element, atttributes) { }; return linkFunction; }; return uDirective; });
      

Template used in Directive

      
   
       
 
        
{ {directiveData.Title}} 
       
 
      

How do i get to compile the code in the TestController, load the directive dynamically, and finally load the content and append the content in scope?

--------------------------------------------------------------------------------------------------------------------------------------------------

Here is a general template for you to reference that abstracts and also demonstrates a few Angular concepts:

JS

.directive('parentDirective', function(Resource, $compile){ return { restrict: 'E', link: function(scope, elem, attrs){ Resource.loadData().then(function(result){ scope.data = result.data; var htm = '
      '; var compiled = $compile(htm)(scope); elem.append(compiled); }); } } }) .directive('childDirective', function(){ return { restrict: 'E', template: '
      
       Content: { {data.key}}
      
' } }) .factory('Resource', function($http){ var Resource = {}; Resource.loadData = function(){ return $http.get('test.json'); } return Resource; })

HTML

Notice that there is no controller code. This is because controllers should never manipulate the DOM- one reason is that it will make your code a PITA to test. So, I put everything in directives, where it should probably be in your case as well.

I also moved the $http service into a factory. Anything state/model related should be in a service. Among other reasons, by doing this, you can inject it almost anywhere (including inside of directives) to access your data without worrying about it disappearing when a controller unloads.

EDIT

You should also consider the dissenting view of the dynamic loading approach in general in the accepted answer of 

♦

11

answered 

May 9 '14 at 4:43

8,6582534