We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Rendering ejangular directives using ng-repeat

Platform: JavaScript |
Control: General |
Published Date: November 23, 2017 |
Last Revised Date: November 23, 2017

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.

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.

<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

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon