AngularJS trên nhập chỉ vào mẫu đầu vào không có giá trị tiết kiệm Mẫu

Question

Tôi đã sau đây trên một trang - Mã đầy đủ trong này Plunker

Có một tùy chỉnh onEnter chỉ thị mà các cuộc gọi một chức năng khi nhập được nhấn vào một đầu vào hình thức trò chuyện . Đoạn mã dưới đây

//**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; 
    }; 
}); 

Vấn đề là giá trị của đầu vào (message) sẽ không được lưu vào mô hình phạm vi (chat). Nếu tôi xóa chỉ thị onenter thì nó sẽ hoạt động. Tôi đang thiếu gì ở đây? Mọi trợ giúp sẽ tuyệt vời

Answer 1

Ok đã tìm ra. Hóa ra khi bạn xác định một đối tượng phạm vi trong chỉ thị của bạn, bạn tạo một phạm vi con mới. Chi tiết tìm thấy ở đây:

Directive with scope breaking ngmodel of an input

Để sửa lỗi này tôi loại bỏ các tuyên bố scope và sử dụng các giá trị của hàm từ attrs đối tượng.

Chỉ trông như thế này bây giờ:

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 
    }; 
}); 

Full mã trong plunker

Answer 2

Bạn nên sử dụng $parent để tham khảo các đối tượng chat như thế này

$parent.chat.message 

Bởi vì bạn sử dụng các chỉ thị mà khai báo một phạm vi con. Dưới đây là toàn bộ html:

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

Answer 3

Đối với góc 1.2 i đã viết như sau:

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 4

Trong thư trả lời để @zool:

tôi đã phải thay đổi câu trả lời của bạn như sau để tránh chức năng OnEnter của tôi được gọi hai lần:

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

xem thêm AngularJS form not submitting when pressing enter