$編譯沒有更新動態生成的html運行

這裏的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);

來源

2016-09-27 TechFreak

顯示指令的完整代碼。 –

在你的指令中使用'terminal：true' –

pro.mean我試過terminal：true。但沒有運氣。如果我添加$（'。owl-carousel'）。append（scope.singleObj.questionText）;那麼我獲得3個不同的價值。但不知何故$編譯是最後一個。我試圖調試，發現第一次調用帶有第一個值。第二次呼叫來自第二個值，但更新第一和第二位，第三次呼叫將更新所有3個值。 – TechFreak

我相信原因，你的輸出是

3 Quest 
3 Quest 
3 Quest

因爲消化週期在你的情況下，只有在for循環執行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); 
    } 
}

來源

2016-09-27 08:40:34

非常感謝您的幫助。乾杯! – TechFreak

-1

使用下面的結構，可能是你用面向對象的概念搞亂：

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

來源

2016-09-27 04:58:53

這也不起作用。無論如何感謝您的幫助。 – TechFreak

你可以讓小提琴，讓我可以直接在那裏檢查？ –

是的。給我一些時間。謝謝。 – TechFreak

$編譯沒有更新動態生成的html運行

回答

相關問題