3

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

在我尝试编写的角度应用程序中，我需要显示一些信息并让用户在激活开关的情况下对其进行编辑。对应的 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 在这里可用）。

现在，该指令除了在控制台上输出一些消息之外什么也没做。如何用我在指令中定义的<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在上面的示例中所做的那样），但我想知道是否有更聪明的方法，比如在定义模板时同时放置除attrsthengModel和 the之外的所有选项？editflag

感谢您的任何见解。

4

1 回答 1

0

这是 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/

于 2013-06-28T14:52:47.793 回答