$compile not updating dynamically generated html runtime

Question

Here is jsfiddle: https://jsfiddle.net/vikramkute/eq3zpmp9/5/

I am new to angular. I have an object which needs to be appended runtime in html. I am using angular 1.2.25

Expected output is

1 Quest
2 Quest
3 Quest

but I am getting last value repeated three times. As per my trial and error, I feel problem is with $compile. I tried different solutions provided on different forums but nothing worked. Any help much appreciated. Thanks.

In Directive (within link function)

            scope.obj =
            [
                {
                    "questionText": "1 Quest"
                },
                {
                    "questionText": "2 Quest"
                },
                {
                    "questionText": "3 Quest"
                }
            ]

            scope.addData = function() {
                for (var i = 0; i < scope.obj.length; i++) {
                    addSlide(scope.obj[i]);
                }
            }

           addSlide = function (obj) {
               scope.singleObj = obj;
               el = $('<div ng-bind="singleObj.questionText"></div>');
               scope.owl.append(el);
               $compile(el)(scope);
           };

Output:

3 Quest
3 Quest
3 Quest

Here is full directive:

angular.module('journeycarousel', [])
    .directive('journeyCarousel', function ($compile) {
        return {
            restrict: 'E',
            templateUrl: '../components/journeyCarousel/journeyCarousel.html',
            transclude: true,
            link: function (scope, element) {

                scope.obj =
                    [
                        {
                            "questionText": "1 Quest"
                        },
                        {
                            "questionText": "2 Quest"
                        },
                        {
                            "questionText": "3 Quest"
                        }
                    ]

                scope.addData = function() {
                    for (var i = 0; i < scope.obj.length; i++) {
                        addSlide(scope.obj[i]);
                    }
                }

                addSlide = function (obj) {
                    scope.singleObj = obj;
                    el = $('<div ng-bind="singleObj.questionText"></div>');
                    scope.owl.append(el);
                    $compile(el)(scope);
                };
            }
        }
    });

Above code is simplified version. This is actual code:

    scope.singleObj = obj;
    el = $('<div class="questionContainer" <div ng-repeat="obj in singleObj"> ng-click="onSlideClick($event,singleObj)"> <div class="item"> <div class="questionSection" ng-bind="singleObj.questionText"></div> <div class="answerSection" ng-bind="singleObj.questionAnswer + singleObj.questionUnitOfMeasure"></div> </div> </div>');
   $('.owl-carousel').owlCarousel('add', el).owlCarousel('update');
   $compile(el)(scope);

pro.mean I tried terminal: true. but no luck. If I add $('.owl-carousel').append(scope.singleObj.questionText); then I am getting 3 different value. but somehow $compile is taking last one. I tried to debug and found that first call come with first value. second call comes with second value but updates both first and second place and third call will update all 3 values. — TechFreak, Sep 27 '16 at 04:48

Ravi Teja · Accepted Answer · 2016-09-27T09:08:31.350

I believe the reason your output is

3 Quest
3 Quest
3 Quest

because digest cycle kicks in only after for loop is executed for 3 times in your case. So, by the end of the 3rd iteration

scope.singleObj

will always be

{
     "questionText": "3 Quest"
}

So, all of the complied elements will always refer to same scope.singleObj

to get rid of that you can do

$scope.singleObj = [];
var addSlide = function(obj, i) {
    $scope.singleObj.push(obj);
    var ele = '<div ng-bind=\"singleObj[' + i + '].questionText"></div>'
    el = $(ele);
    $("#container").append(el);
    $compile(el)($scope);
};

$scope.addData = function() {
    for (var i = 0; i < $scope.newCarouselSlideData.length; i++) {
        addSlide($scope.newCarouselSlideData[i], i);
    }
}

score -1 · Answer 2 · answered Sep 27 '16 at 04:58

-1

Use Below structure, probably you are messing up with object oriented concept:

addSlide = function (obj) {
        scope.singleObj = angular.copy(obj);
        el = $('<div ng-bind="singleObj.questionText"></div>');
        scope.owl.append(el);
        $compile(el)(scope);
};

answered Sep 27 '16 at 04:58

Pravin Erande

89
9

This is also not working. Anyways thanks for you help. – TechFreak Sep 27 '16 at 05:09
can you make the fiddle, so that I can check directly over there? – Pravin Erande Sep 27 '16 at 05:11
Yes will do. give me some time. Thanks. – TechFreak Sep 27 '16 at 05:15
Use updated fiddle https://jsfiddle.net/eq3zpmp9/6/ Multi addition won't working as ng-repeat will throw exception for duplicates. – Pravin Erande Sep 27 '16 at 06:13
fiddle I have created is simplified version of what I am doing. adding all items in an array and using ng-repeat won't help. I have to add one item at a time. Any other way with minimal updates? – TechFreak Sep 27 '16 at 06:26
Why do you thing ng-repeat won't help? If its not working you can go with workaround – Pravin Erande Sep 27 '16 at 06:42
Because instead of append I have to use "$('.owl-carousel').owlCarousel('add', el).owlCarousel('update');" this is for updating owl carousel runtime. I can pass only one item in it at a time. If I use ng-repeat all 3 items will go in one slide. – TechFreak Sep 27 '16 at 06:45
Check with another workaround if not then add support for "$('.owl-carousel').owlCarousel('add', el).owlCarousel('update');" to accept it as list – Pravin Erande Sep 27 '16 at 06:49
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/124265/discussion-between-techfreak-and-pravin-erande). – TechFreak Sep 27 '16 at 06:51

$compile not updating dynamically generated html runtime

2 Answers2