【发布时间】:2015-09-07 20:35:44
【问题描述】:
我有这个循环在屏幕上显示我想要的所有可能的问题。我使用指令附加到此列表,这些更新显示正常。
{{Questions}}
<div id="items" style="border: 3px solid; border-radius:5px; border-color: #808080; min-height: 500px; padding: 10px;">
<div question-type ng-repeat="Question in Questions track by $index"></div>
</div>
但是,当我点击一个问题时,我会在页面其他位置显示该问题的内容,并带有可编辑字段,以便您对其进行修改。
您可以在上面的代码中看到我在循环上方的屏幕上显示 Questions json 对象,这在我输入时正确显示了我的更新,但循环的内容没有。循环中的问题将保持其创建时的状态,不会更新。
知道为什么对象似乎正在更新,但它对使用它的 ng-repeat 没有影响吗?
编辑
这是我与 ng-repeat 一起使用的指令
app.directive('questionType', function ($http, $compile) {
return {
restrict: 'AE',
link: function (scope, element, attr, model) {
switch (scope.Question.inputType) {
case 'checkbox':
//element.append('<input type="checkbox" ng-model="Question.checked"/><button ng-if="input.checked" >X</button>');
break;
case 'text':
var strElm = '<div class="form-group" data-ng-click="selectProperties($index)"><label class="col-lg-12 control-label" style="text-align: left;">' + scope.Question.label + '</label><div class="col-lg-12"><input type="text" class="form-control" placeholder=' + scope.Question.placeholder + ' readonly></div></div>';
var compiledHtml = $compile(strElm)(scope);
element.append(compiledHtml);
break;
}
}
};
});
第二次编辑
我没有正确绑定。得到它的工作与这条线 -
var strElm = '<div class="form-group" data-ng-click="selectProperties($index, obj.Questions)"><label class="col-lg-12 control-label" style="text-align: left;" >{{Question.label}}</label><div class="col-lg-12"><input type="text" class="form-control" placeholder=' + scope.Question.placeholder + ' readonly ng-model="Question.placeholder"></div></div>';
【问题讨论】:
-
如何在 ng-repeat 元素中绑定 Question 项?是问题类型指令吗?避免在同一个 ng-repeat 标记上使用其他指令,这可能会导致意外行为,请使用带有参数的指令作为 ng-repeat 标记的子级
-
嗨,我更新了答案以显示正在使用的指令及其显示方式。有什么想法可以改变这个吗?
-
指令没有绑定,怎么更新?您需要将问题标签绑定到一些标签或文本以通过角度更新。在这种情况下,最好使用带有控制器的指令和链接的模板 insthead
-
您好,感谢您的回复。我对此很陌生,所以请原谅我的无知。如何绑定它以使其显示?我尝试将 ng-model="Questions[$index]" 添加到附加的 html 中,但这不起作用。
-
请参阅创建指令段落,以创建一个具有自己的范围并采用参数docs.angularjs.org/guide/directive 的指令,最终结果将如我在我的答案中发布的那样,您只会错过指令定义
标签: angularjs