2

要素の単純なインプレース編集を行うディレクティブを作成しようとしています。これまでの私のコードは次のとおりです。

directive('clickEdit', function() {
return {
  restrict: 'A',
  template: '<span ng-show="inEdit"><input ng-model="editModel"/></span>' +
            '<span ng-show="!inEdit" ng-click="edit()">{{ editModel }}</span>',
  scope: {
    editModel: "=",
    inEdit: "@"
  },
  link: function(scope, element, attr) {
    scope.inEdit = false;
    var savedValue = scope.editModel;
    var input = element.find('input');

    input.bind('keyup', function(e) {
      if ( e.keyCode === 13 ) {
        scope.save();
      } else if ( e.keyCode === 27 ) {
        scope.cancel();
      }
    });

    scope.edit = function() {
      scope.inEdit = true;
      setTimeout(function(){
        input[0].focus();
        input[0].select();
      }, 0);
    };

    scope.save = function() {
      scope.inEdit = false;
    };

    scope.cancel = function() {
      scope.inEdit = false;
      scope.editModel = savedValue;
    };
  }
}
})

scope.edit 関数は inEdit を true に設定します。これはうまく機能します。テキストが非表示になり、input タグが表示されます。ただし、scope.inEdit を false に設定する scope.save 関数はまったく機能しません。入力タグを隠したり、テキストを表示したりしません。

なんで?

4

1 に答える 1