Angularjs 角度：如何在模型更新后重新呈现已编译的模板？

我正在开发一个生成json的angular表单生成器。 除了一件事，一切都很好

您可以在此处找到一个示例：

HTML:

<div ng-app='app'>
    <div class='formBuilderWrapper' id='builderDiv' ng-controller="FormBuilderCtrl" >
        <div class='configArea' data-ng-controller="elementDrag">    
            <h2>drag/drop</h2>
            <form name="form" novalidate class='editBloc'>
                <div data-ng-repeat="field in fields" class='inputEdit'>
                    <data-ng-switch on="field.type">
                        <div class='labelOrder' ng-class='{column : !$last}' drag="$index" dragStyle="columnDrag" drop="$index" dropStyle="columnDrop">{{field.type}}
                        </div>
                        <label for="{{field.name}}" data-ng-bind-html-unsafe="field.caption"></label>

                        <input data-ng-switch-when="Text" type="text" placeholder="{{field.placeholder}}" data-ng-model="field.value" />

                        <p data-ng-switch-when="Text/paragraph" data-ng-model="field.value" data-ng-bind-html-unsafe="field.paragraph"></p>

                            <span data-ng-switch-when="Yes/no question">
                                <p data-ng-bind-html-unsafe="field.yesNoQuestion"></p>
                                <input type='radio' name="yesNoQuestion" id="yesNoQuestion_yes" value="yesNoQuestion_yes" />
                                <label for="yesNoQuestion_yes">Oui</label>
                                <input type='radio' name="yesNoQuestion" id="yesNoQuestion_no" value="yesNoQuestion_no"/>
                                <label for="yesNoQuestion_no">Non</label>
                            </span>     
            <p data-ng-switch-when="Submit button" class='submit' data-ng-model="field.value">
                    <input value="{{field.name}}" type="submit">
                </p>                        
                    </data-ng-switch>
                </div>
            </form>
        </div>        
        <div id='previewArea' data-ng-controller="formWriterCtrl">
            <h2>preview</h2>    
            <div data-ng-repeat="item in fields" content="item" class='templating-html'></div>
        </div>        
    </div>
</div>

当页面加载一切正常时，Hello1可见，Hello2隐藏

但当我在“Yes/no question”之后删除Hello1时，dom元素会被重新组织，但Hello1不会被隐藏。 我认为它来自$compile，但我不知道如何解决它

你能帮我做这个吗

---

谢谢

我只看到您根据链接函数中的该规则（在“是/否”之后）在元素上设置“隐藏”类。在DOM元素第一次创建时，它只被调用一次。更新数据模型不会重新创建元素，而是就地更新。如果你想这样做的话，你需要一个能够重新创建它的机制

我认为有三种方法可以做到这一点：

在链接器函数中，侦听与上面侦听相同的

dropEvent

。这比您想象的更有效（速度非常快），您可以重新评估是否应用这个

隐藏的
类

使用类似ngIf的东西或在集合中重新创建它来强制完全重新创建元素。这不是很有效，但有时出于各种原因仍然是可取的

如果您的用例实际上是这么简单（如果这不是您正在尝试做的更复杂的事情的重复），那么您可以使用CSS来做类似的事情。一个简单的规则，比如

.yes-no-question + .text-paragraph { display: none; }

使用同级目标可以直接处理此问题，而无需做太多工作。很明显，这在功能上是非常有限的，但是如果它能满足您的需求，那么它是最有效的选择

$scope.fields = 

[{"type":"Text/paragraph","paragraph":"hello1"},{"type":"Yes/no question","yesNoQuestion":"following items must be hidden","yes":"yes","no":"no"},  
 {"type":"Text/paragraph","paragraph":"hello2"},{"type":"Submit button","name":"last item"}]  ;

.yes-no-question + .text-paragraph { display: none; }