angularjs - AngularJS在表单输入上输入指令不保存模型值

Question

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

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

//**HTML View**
<div ng-controller="mainCtrl">
    <ul>
      <li ng-repeat="chat in chatMessages">
        {{chat.username}}<br/>
           {{chat.message}}
        </li>
    </ul>
</div>
<form id="chatForm" name="chatForm" ng-controller="formCtrl">
    <label for="chat-username">User: </label>
    <input type="text" id="chat-username" class="chat__username" ng-model="chat.username" required>
    <label for="chat-input">Chat: </label> 
    <input type="text" id="chat-input" class="chat__input" on-enter="sendChat()" ng-model="chat.message" required>
    <a href="#" class="chat__submit icon-comments" id="chat-submit"  ng-click="sendChat()" ng-disabled="isChatValid()">Chatme</a>
</form>


//**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指令，它会起作用。我在这里想念什么？任何帮助都会很棒

Answer 1

好的，想通了。结果是，当您在指令中定义范围对象时，您会创建一个新的子范围。在此处找到详细信息：

具有范围破坏输入的 ngmodel 的指令

为了解决这个问题，我删除了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
  };
});

plunker中的完整代码

Answer 2

对于角度 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.onEnter();
                    scope.$apply();
                }
            });
        }
    }
});

Answer 3

您应该像这样使用$parent来引用chat对象

$parent.chat.message

因为您使用声明子范围的指令。这是完整的html：

<input type="text" id="chat-input" class="chat__input" on-enter="sendChat()" ng-model="$parent.chat.message" required>

Answer 4

回复@zool：

我不得不按如下方式修改您的答案，以避免我的 onEnter 函数被调用两次：

[...]
if(event.which === 13) {
    event.preventDefault();
    scope.onEnter();
    scope.$apply();
}
[...]

另请参阅按 Enter 时未提交 AngularJS 表单