angularjs - Angular .js : choosing a pre-compiled template depending on a condition

Question

[免责声明:我只有几周的时间了]

在我尝试编写的 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}}>

哪里editing是一个 bool 值(由开关设置)和 value该模型。

我认为这是一种情境指令，我一直在努力实现它。这个想法是预编译 <span>和 <input>元素，然后根据 editing 的值选择要显示的元素 bool 值。这是我到目前为止所拥有的:

angular.module('mod', [])
.controller('BaseController',
  function ($scope) {
    $scope.value = 0;
    $scope.editing = true;
  })
.directive('toggleEdit',
  function($compile) {
    var compiler = function(scope, element, attrs) {
        scope.$watch("editflag", function(){
            var content = '';
            if (scope.editflag) {
                var options='type="' + (attrs.type || "text")+'"';
                if (attrs.min) options += ' min='+attrs.min;
                options += ' ng:model="' + attrs.ngModel
                          +'" value={{' + attrs.ngModel +'}}';
                content = '<input '+ options +'></input>';
            } else {
                content = '<span class="uneditable-input" ng:bind="'+attrs.ngModel+'"></span>';
            };
            console.log("compile.editing:" + scope.editflag);
            console.log("compile.attrs:" + angular.toJson(attrs));
            console.log("compile.content:" + content);
            })
    };
    return {
        require:'ngModel',
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: {
            editflag:'='
            },
        link: compiler
    }
});

(整个html+js可用here)。

现在，该指令除了在控制台上输出一些消息外什么都不做。如何更换 <toggle-edit ...>我的 html 元素带有 content我在指令中定义？如果我正确理解文档，我应该编译 content在链接之前:那是 preLink指令的方法 compile ， 正确的 ？但我如何在实践中实现它？

---

奖励问题:我希望能够使用这个 <toggle-edit>带有一些选项的元素，例如:

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

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

感谢您的任何见解。

Answer 1

这是 John Lindquist 的教程，展示了如何做你想做的事。 http://www.youtube.com/watch?v=nKJDHnXaKTY

这是他的代码:

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

你可以看到它在这里工作:http://jsfiddle.net/moderndegree/cRXr6/