Javascript $compile未更新动态生成的html运行时

以下是JSFIDLE：

我是个新手。我有一个需要在运行时以html追加的对象。我使用的是角度1.2.25

预期产量为

1 Quest
2 Quest
3 Quest

3 Quest
3 Quest
3 Quest

但我得到的最后一个值重复了三次。根据我的尝试和错误，我觉得问题在于$compile。我在不同的论坛上尝试了不同的解决方案，但没有任何效果。非常感谢您的帮助。谢谢

In指令（链接函数内）

以下是完整的指令：

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

角度模块（'journeycarousel'，[]） .directive（'journeyCarousel'，函数（$compile）{ 返回{ 限制：'E'， templateUrl:“../components/journeyCarousel/journeyCarousel.html”， 是的， 链接：功能（范围、元素）{ 范围.obj= [ { “问题文本”：“1个任务” }, { “问题文本”：“2任务” }, { “问题文本”：“3任务” } ] scope.addData=函数（）{ 对于（变量i=0；i 以上代码是简化版。这是实际代码：

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

scope.singleObj=obj；
el=$（''）；
$（'.owl carousel'）.owlCarousel（'add'，el.）.owlCarousel（'update'）；
美元（el）（范围）；

使用下面的结构，可能您弄乱了面向对象的概念：

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

addSlide=函数（obj）{
scope.singleObj=角度复制（obj）；
el=$（''）；
scope.owl.append（el）；
美元（el）（范围）；
};

我相信您的输出是

1 Quest
2 Quest
3 Quest

3 Quest
3 Quest
3 Quest

因为在您的案例中，只有在for循环执行3次之后，消化循环才会启动。 因此，在第三次迭代结束时

scope.singleObj 

永远是

{
     "questionText": "3 Quest"
}

因此，所有符合的元素都将始终引用相同的

范围

要摆脱它，你可以这样做

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

$scope.singleObj=[]；
var addSlide=函数（obj，i）{
$scope.singleObj.push（obj）；
变量ele=''
el=$（ele）；
$（“#容器”）。追加（el）；
$compile（el）（$scope）；
};
$scope.addData=函数（）{
对于（变量i=0；i<$scope.newCarouselSlideData.length；i++）{
添加幻灯片（$scope.newCarouselSlideData[i]，i）；
}
}
显示指令的完整代码。在指令Pro中使用
终端：true
。表示我尝试了终端：true。但是没有运气。如果我添加$（'.owl carousel'）.append（scope.singleObj.questionText）；然后我得到3个不同的值。但不知怎的，$compile正在使用最后一个。我试着调试，发现第一个调用带有第一个值。第二次调用带有第二个值，但同时更新第一和第二个位置，第三次调用将更新所有3个值。这也不起作用。不管怎样，谢谢你的帮助。你能做小提琴吗，这样我就可以直接在那里检查了？可以。给我点时间。谢谢。使用更新的fiddle Multi addition将不起作用，因为ng repeat将对重复项引发异常。我创建的fiddle是我正在执行的操作的简化版本。在数组中添加所有项并使用ng repeat不会有帮助。我必须一次添加一项。有没有其他方法只需要最少的更新？