Angularjs Angular.js：根据条件选择预编译模板

[免责声明：我只剩下几周的时间了]

在我试图编写的angular应用程序中，我需要显示一些信息，并允许用户在激活开关的情况下编辑这些信息。相应的HTML为：

    <span ng-hide="editing" class="uneditable-input" ng:bind='value'>
    </span>
    <input ng-show="editing" type="text" name="desc" ng:model='value' value={{value}}>

（整个html+js都是可用的）

现在，该指令除了在控制台上输出一些消息外，什么都不做。如何用指令中定义的

内容替换html中的
元素？如果我正确理解了文档，我应该在链接它之前编译
内容
：这就是指令
编译
的
预链接
方法，对吗？但我如何在实践中实现它呢


额外问题：我希望能够将此
元素与一些选项一起使用，例如：

<toggle-edit type="text" ...></toggle-edit>
<toggle-edit type="number" min=0 max=1 step=0.01></toggle-edit>



我可以对各种选项的存在性添加测试（就像我在上面的例子中对
min
所做的那样），但我想知道是否有更聪明的方法，比如在定义模板时，将所有
attrs
放在
ngModel
和
editflag
上

感谢您的帮助。
这是约翰·林德奎斯特（John Lindquist）的一篇教程，介绍了如何做您想做的事情

这是他的密码：

angular.module('myApp', [])
.directive('jlMarkdown', function () {
    var converter = new Showdown.converter();
    var editTemplate = '<textarea ng-show="isEditMode" ng-dblclick="switchToPreview()" rows="10" cols="10" ng-model="markdown"></textarea>';
    var previewTemplate = '<div ng-hide="isEditMode" ng-dblclick="switchToEdit()">Preview</div>';
    return{
        restrict:'E',
        scope:{},
        compile:function (tElement, tAttrs, transclude) {
            var markdown = tElement.text();

            tElement.html(editTemplate);
            var previewElement = angular.element(previewTemplate);
            tElement.append(previewElement);

            return function (scope, element, attrs) {
                scope.isEditMode = true;
                scope.markdown = markdown;

                scope.switchToPreview = function () {
                    var makeHtml = converter.makeHtml(scope.markdown);
                    previewElement.html(makeHtml);
                    scope.isEditMode = false;
                }
                scope.switchToEdit = function () {
                    scope.isEditMode = true;
                }
            }
        }
    }
});

angular.module（'myApp'，[]）
.指令（'jlMarkdown'，函数（）{
var converter=new shodown.converter（）；
var editTemplate=''；
var previewTemplate='Preview'；
返回{
限制：'E'，
作用域：{}，
编译：函数（远程通讯、tAttrs、转置）{
var markdown=tElement.text（）；
html（编辑模板）；
var previewElement=angular.element（previewTemplate）；
远程通讯。附加（预览）；
返回函数（范围、元素、属性）{
scope.isEditMode=true；
scope.markdown=降价；
scope.switchToPreview=函数（）{
var makeHtml=converter.makeHtml（scope.markdown）；
html（makeHtml）；
scope.isEditMode=false；
}
scope.switchToEdit=函数（）{
scope.isEditMode=true；
}
}
}
}
});

您可以看到它在这里工作：
感谢您提供教程的链接，它非常有用。基本上，您建议的解决方案不是选择模板，而是输出一个模板，该模板的元素可以根据需要隐藏。这是个好主意。但是，由于
compile
函数还没有作用域，因此在创建模板时无法访问父模型。如何将模板链接到父模型？
angular.module('myApp', [])
.directive('jlMarkdown', function () {
    var converter = new Showdown.converter();
    var editTemplate = '<textarea ng-show="isEditMode" ng-dblclick="switchToPreview()" rows="10" cols="10" ng-model="markdown"></textarea>';
    var previewTemplate = '<div ng-hide="isEditMode" ng-dblclick="switchToEdit()">Preview</div>';
    return{
        restrict:'E',
        scope:{},
        compile:function (tElement, tAttrs, transclude) {
            var markdown = tElement.text();

            tElement.html(editTemplate);
            var previewElement = angular.element(previewTemplate);
            tElement.append(previewElement);

            return function (scope, element, attrs) {
                scope.isEditMode = true;
                scope.markdown = markdown;

                scope.switchToPreview = function () {
                    var makeHtml = converter.makeHtml(scope.markdown);
                    previewElement.html(makeHtml);
                    scope.isEditMode = false;
                }
                scope.switchToEdit = function () {
                    scope.isEditMode = true;
                }
            }
        }
    }
});