$ обобщит не обновляется динамически генерируемый HTML выполнения

Question

Вот jsfiddle: https://jsfiddle.net/vikramkute/eq3zpmp9/5/

Я новичок в угловой. У меня есть объект, который должен быть добавлен во время выполнения в html. Я использую угловой 1.2.25

Ожидаемый выход является

1 Quest 
2 Quest 
3 Quest 

, но я получаю повторяться последнее значение в три раза. Согласно моей проб и ошибок, я чувствую, что проблема связана с компиляцией $. Я пробовал разные решения на разных форумах, но ничего не получилось. Любая помощь очень ценится. Благодарю.

В директиве (в пределах функции связи)

  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); 
      }; 

Выход:

3 Quest 
3 Quest 
3 Quest 

Вот полная директива:

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); 
       }; 
      } 
     } 
    }); 

Выше кода упрощенная версия. Это фактический код:

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); 

Answer 1

Я считаю, что причина ваш выход

3 Quest 
3 Quest 
3 Quest 

потому что переваривать цикл пинается только после того, как цикл for выполняется 3 раза в вашем случае. Таким образом, к концу 3-й итерации

scope.singleObj 

всегда будет

{ 
    "questionText": "3 Quest" 
} 

Таким образом, все соблюдали элементы всегда будут относиться к той же scope.singleObj

, чтобы избавиться от вас могут делать

$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); 
    } 
} 

Answer 2

Использование Ниже структуры, вероятно, вы Мессинг с объектно-ориентированного понятия:

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