$compile不更新动态生成的HTML运行时
$compile not updating dynamically generated html runtime
https://jsfiddle.net/vikramkute/eq3zpmp9/5/
我是新来的角。我有一个对象,需要追加在html运行时。我使用的是angular 1.2.25
期望输出
1 Quest
2 Quest
3 Quest
,但我得到最后一个值重复三次。根据我的试验和错误,我觉得问题是与$compile。我尝试了不同论坛上提供的不同解决方案,但没有任何效果。任何帮助,非常感谢。谢谢。
In指令(在链接函数内)
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="answerswerSection" ng-bind="singleObj.questionAnswer + singleObj.questionUnitOfMeasure"></div> </div> </div>');
$('.owl-carousel').owlCarousel('add', el).owlCarousel('update');
$compile(el)(scope);
我相信你输出的原因是
3 Quest
3 Quest
3 Quest
因为在您的例子中,只有在for循环执行了3次之后,digest循环才会启动。因此,在第三次迭代结束时
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);
}
}
使用下面的结构,可能你搞不懂面向对象的概念:
addSlide = function (obj) {
scope.singleObj = angular.copy(obj);
el = $('<div ng-bind="singleObj.questionText"></div>');
scope.owl.append(el);
$compile(el)(scope);
};
相关文章:
- HTML/JS github页面项目没有't在使用firefox运行时加载图像或声音
- HTML 运行时创建代码非常慢
- Microsoft JScript运行时错误:对象没有't支持属性或方法'html'
- 仅当存在某些HTML元素时才运行多个Javascript脚本
- 在运行时将col添加到html表的colgroup中
- 在运行时添加复选框并将其保存在 HTML 文件代码中
- 如何动态更改由 javascript 在运行时生成的 html 的 css
- 如何在 HTML 中获取运行时控制
- Android - 如何在运行时生成的HTML数据中加载外部javascript文件
- 从 HTML 应用程序与 Flex 应用程序运行时出现 ActiveXObject 错误
- Apache Cordova:运行时发布更新索引.html
- 如何在运行时更改 html 按钮的单击事件上的类
- HTML 在服务器上运行时在 jQuery 中显示代码而不是字符
- 在运行时在 JQuery 中添加 HTML 元素 - 未按预期工作
- Ajax 客户端框架运行 HTML 代码时出错
- 如何获取html元素运行时代码以生成通用副本?就像复制文本框中输入文本一样
- 在加载html页面时运行perl脚本
- 如何在运行时使用javaScript设置HTML属性值
- 使用Html.运行时BeginForm
- $compile不更新动态生成的HTML运行时