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

Question

这是 jsfiddle： https://jsfiddle.net/vikramkute/eq3zpmp9/5/

我是 angular 的新手。我有一个对象需要在 html 中附加到运行时。我正在使用 angular 1.2.25

预期输出为

1 Quest
2 Quest
3 Quest

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

在指令中（在 link 函数内）

            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

使用下面的结构，你可能搞砸了面向对象的概念：

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

Answer 2

我相信你输出的原因是

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

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

$compile not updating dynamically generated html runtime

javascript

angularjs

angularjs-scope

angular-directive-link