Компиляция динамической директивы внутри шаблона

Question

У меня есть директива, как это:

foldeskApp.directive('contributionFooter', function() { 
    return { 
     restrict: 'C', 
     template: '<button type="button" class="btn" ng-class="{\'btn-success\': canCreate()}">Add</button>' 
    }; 
}); 

и контроллер, как это:

foldeskApp.controller('MainCtrl', 
    ['Auth', '$scope', function(Auth, $scope) { 
    $scope.footerType = 'contribution'; 
}]); 

Могу ли я назвать директивы, как это?

<div class="modal-footer {{footerType}}-footer"></div> 

Answer 1

Вам необходимо скомпилировать DOM, используя службу компиляции $.

Вот пример того, как добиться того, что, хотя я не любитель, используя $ таймаут здесь:

http://codepen.io/jlowcs/pen/jEKKjZ

HTML:

<div ng-controller="MainCtrl"> 
    <div class="modal-footer {{footerType}}-footer"></div> 
</div> 

JS:

angular.module('exampleApp', []) 
.directive('contributionFooter', function() { 
    return { 
     restrict: 'C', 
     template: '<button type="button" class="btn" ng-class="{\'btn-success\': canCreate()}">Add</button>' 
    }; 
}) 
.controller('MainCtrl', function($scope, $element, $timeout, $compile) { 
    $scope.footerType = 'contribution'; 

    //timeout to do it when {{footerType}} has been replaced 
    //but it would probably be best to do this in a link function in a directive 
    $timeout(function() { 
     $compile($element.children())($scope); 
    }); 
}); 

angular.bootstrap(document, ['exampleApp']);