Question

我有这个可编辑的指令，除了在模型里面有数据之前不会显示文本之外它很有用。

我尝试的方法是：

{{option.title | Test}}

我希望这会显示option.title，但它不会。

以下是HTML代码：

<editable model="option.title">{{option.title | Test}}</editable>

我可以使用ng-if吗？

这是指令：

App.directive('editable', function() {
    return {
        restrict: 'E',
        scope: {model: '='},
        replace: false,
        template:
'<span>'+
    '<input type="text" ng-model="model" style="width: 100%; font-size: 18px" ng-show="edit" ng-enter="edit=false"></input>'+
        '<span ng-show="!edit">{{model}} <i class="fa fa-pencil" style="font-size:20px;"></i></span>'+
'</span>',
        link: function(scope, element, attrs) {
            scope.edit = false;
            element.bind('click', function() {
                scope.$apply(scope.edit = true);
                element.find('input').focus();
            });
        }
    };
});

Answer 1

编辑1

试试这个：

App.directive('editable', function($compile) {
    return {
        restrict: 'E',
        scope: {model: '='},
        replace: false,
        template:
$compile('<span>'+
    '<input type="text" ng-model="model" style="width: 100%; font-size: 18px" ng-show="edit" ng-enter="edit=false"></input>'+
        '<span ng-show="!edit">{{model}} <i class="fa fa-pencil" style="font-size:20px;"></i></span>'+
'</span>'),
        link: function(scope, element, attrs) {
            scope.edit = false;
            element.bind('click', function() {
                scope.$apply(scope.edit = true);
                element.find('input').focus();
            });
        }
    };
});

编辑2

尝试将变量初始化为：

App.directive('editable', function($compile) {
        return {
            restrict: 'E',
            scope: {model: '='},
            replace: false,
            template:
    $compile('<span>'+
        '<input type="text" ng-model="model" style="width: 100%; font-size: 18px" ng-show="edit" ng-enter="edit=false"></input>'+
            '<span ng-show="!edit">{{model}} <i class="fa fa-pencil" style="font-size:20px;"></i></span>'+
    '</span>'),
            link: function(scope, element, attrs) {
                scope.edit = false;
                scope.model = '';
                element.bind('click', function() {
                    scope.$apply(scope.edit = true);
                    element.find('input').focus();
                });
            }
        };
    });

编辑3

尝试：

<editable ng-init="option={title:''};" model="option.title">{{option.title | Test}}</editable>

Answer 2

如果您没有使用tansclusion，

指令的开始和结束标记之间的内容将完全被指令的模板替换。

Answer 3

<editable model="option.title">{{option.title || 'Placeholder Text' | Test}}</editable>

-

 {{model || 'text before model updates' | filter}}

为angular {{}}添加占位符

3 个答案: