Question

我写了以下Angular指令：

angular.module('solarquote.directives', []).directive('editfield', function() {
return {
    restrict: 'A',
    transclude: true,
    template: '<span ng-hide="editorEnabled" ng-transclude></span>' +   // viewable field
  '<span ng-show="editorEnabled"><input class="input-medium" ng-model="editableField"></span>', // editable field
    link: function(scope, elm, attrs, ctrl) {
        scope.editorEnabled = false;
        scope.editableField = elm.children[0].children[0].innerText;
     }
  };
})

在html中，在ng-repeat中：

<span editfield>{{ item.fields.name }}</span>

我想预先填充指令模板中的输入字段，并在ng-transclude中使用相同的内容。浏览DOM并获取文本会产生：{{item.fields.name}}而不是渲染数据：“Bob”（或任何名称）。

访问已转换数据的最佳方法是什么？

由于

Answer 1

无法将ng-model分配给您在翻译块中指定的表达式。这是因为翻译块可以是{{ functionValue() }}或{{ field1+':'+field2 }}这样的表达式。 Angular根本不知道如何扭转这些表达。

您可以做的是提供您要更新的模型的参考。请参阅以下punkler http://plunker.co/edit/NeEzetsbPEwpXzCl7kI1?p=preview（需要jQuery）

directive('editfield', function() {

  var template = ''+
    '<span ng-show="editorEnabled"><input class="input-medium" ng-model="editfield"></span>'+
    '<span ng-hide="editorEnabled" ng-transclude></span>';

  return {
    restrict: 'A',
    template: template,
    scope:{
      editfield:'='
    },
    transclude:true,
    link: function(scope, element, attrs) {
      var input = element.find('input');
      input.on('blur',function(){
        scope.editorEnabled=false;
        scope.$apply();
      });
      element.bind('click',function(){
        scope.editorEnabled=!scope.editorEnabled;
        scope.$apply();
        input.focus();
      })
     }
  };
})

Ng-从链接中的模板转换数据

1 个答案: