AngularJS on enter指令在表单输入中没有保存模型值。

15 浏览
0 Comments

AngularJS on enter指令在表单输入中没有保存模型值。

我在页面上有以下内容 - 完整的代码在这个Plunker中。

页面上有一个自定义的onEnter指令，当在聊天表单输入上按下回车键时调用一个函数。下面是代码片段：

//**HTML视图**
    
    
      
  • 
        {{chat.username}}
           {{chat.message}}
        
    • 
    



    
    
     
    
    发送消息


//**Javascript**
app.controller('formCtrl',function($scope,Chats){
  $scope.sendChat = function() {
    if($scope.isChatValid()) {
      return;
    }
    console.log(JSON.stringify($scope.chat));
    var msg = {};
    angular.copy($scope.chat,msg);
    Chats.data.push(msg);       
  };
  $scope.isChatValid = function() {
    return $scope.chatForm.$invalid;
  };
});

问题是输入框(message)的值没有保存到作用域模型(chat)中。如果我移除onenter指令，它就能正常工作。我在这里漏掉了什么？任何帮助将是很棒的。

0

3 答案

0 Comments

AngularJS中的onEnter指令在表单输入上没有保存模型值的问题的原因是没有正确使用$scope.$apply()方法来更新模型。解决方法是使用$scope.$apply()方法包裹$scope.onEnter()函数。

在AngularJS 1.2版本中，可以通过以下方式编写代码：

var app = angular.module('application', []);
app.directive('onEnter', function() {
    return {
        scope: {onEnter: '&'},
        link: function(scope, element) {
            console.log(scope);
            element.bind("keydown keypress", function(event) {
                if(event.which === 13) {
                    scope.$apply(function(){
                        scope.onEnter();
                    });
                }
            });
        }
    }
});

通过这种改进的解决方案，我们在$scope.$apply()方法中使用了一个函数来执行$scope.onEnter()函数，这样就能正确地更新模型值了。

0
0 Comments

问题的原因是使用了指令，该指令声明了一个子作用域。解决方法是使用$parent来引用chat对象，并将其应用于ng-model指令。以下是完整的HTML代码：

感谢答案，我找到了问题的原因并解决了它。

0
0 Comments

AngularJS中的一个问题是，在表单输入框中使用"on enter"指令时无法保存模型的值。通过研究发现，问题的根源在于指令中定义了一个新的子作用域。为了解决这个问题，需要移除scope的声明，并使用attrs对象中的函数值。

具体的解决方法如下：

app.directive('onEnter',function() {
  var linkFn = function(scope,element,attrs) {
    element.bind("keypress", function(event) {
      if(event.which === 13) {
        scope.$apply(function() {
          scope.$eval(attrs.onEnter);
        });
        event.preventDefault();
      }
    });
  };
  return {
    link:linkFn
  };
});

通过这种方式，不再创建隔离的作用域，避免与其他可能应用于相同DOM元素的隔离作用域指令发生冲突。

完整的代码可以在plunker上查看：[plunker链接](http://plnkr.co/edit/Rk4aAG?p=preview)

虽然这种解决方法使用了$eval，个人并不是很喜欢。但是，我意识到这种解决方案有一个重要的优点：它不会创建隔离作用域，因此不会与其他潜在的隔离作用域指令发生冲突。

0