Rendering ejangular directives using ng-repeat
We can use AngularJS directive ng-repeat to iterate data with ejangular directive rendering. With this scenario AngularJS does not compile expressions ({{data}}) before ejangular directives rendering. So, we can’t access the compiled data with ejangular directives.
Since need to compile AngularJS expressions manually to render ejangular directives with ng-repeat. To do that define AngularJS custom directive called ejcompile to compile expressions. Use the below code snippet for ejcompile directive.
AngularJS
angular.module('syncApp', ['ejangular', 'samplecontrol']) .directive('ejcompile', function ($compile, $interpolate) { return { restrict: 'EA', replace: true, compile: function ($scope, $elm, $attrs) { return { pre: function ($scope, $elm, $attrs) { let html = $interpolate($elm.html())($scope); $elm.html(html); } } }
} })
|
After defining ejcompile directive, add this custom directive in parent tag of ejangular directive. Refer to the below code snippet.
AngularJS
<div ng-repeat="i in ['WARN','SUCCESS','ERROR']" style="margin-left: 20px; display: inline-table"> <div ejcompile> <button id="button_{{i}}" ej-button e-text={{i}}></button> </div> </div>
|
In the above example, the ej-button directive will be rendered with compiled expressions (ID attribute appended with ng-repeat array values) as like the below
