Question

[免责声明：我只有几个星期的角度在我身后]

在我正在尝试编写的角度应用程序中，我需要显示一些信息，并让用户编辑它，只要它们激活了一个开关。相应的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是布尔值（由开关设置）和value模型。

我认为这是针对某种情况而设计的指令，我一直在努力实施。我们的想法是预编译<span>和<input>元素，然后根据editing布尔值的值选择要显示的元素。这是我到目前为止所做的：

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的{{1}}方法，对吧？但是我如何在实践中实施它？

加分问题：我希望能够将此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是否一次？

感谢您的任何见解。

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/

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

1 个答案: