Question

我正在尝试编写一个指令，对元素进行简单的就地编辑。到目前为止，这是我的代码：

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，并且效果很好 - 它隐藏文本并显示输入标记。但是，将scope.inEdit设置为false的scope.save函数根本不起作用。它不会隐藏输入标记并显示文本。

为什么？

Answer 1

您正在响应scope.save()事件的事件处理程序调用{{1}}。但是，此事件处理程序不是由/通过AngularJS框架调用的。如果AngularJS认为可能发生了更改以减轻工作负载，AngularJS将仅扫描模型的更改（目前AngularJS的脏检查是计算密集型的。）

因此，您必须使用keyup功能使AngularJS意识到您正在对范围进行更改。将scope.$apply函数更改为此函数，它将起作用：

scope.save

此外，似乎实际上不需要将此scope.save = function(){ scope.$apply(function(){ scope.inEdit = false; }); });函数绑定到范围变量。因此，您可能希望改为定义“普通”函数，或者只是将代码集成到事件处理程序中。

为什么这个ng-show指令不能在模板中工作？

1 个答案: