$编译没有更新动态生成的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运行

回答

相关问题