$ đồng hồ được bắn chỉ một lần bên trong chỉ thị

Question

Tôi mới vào js góc, vì vậy hãy một số một giúp tôi out.I có mẫu tôi ở đây:

<form ng-model="signup" form-valid> 
    <input type="text" name="username" ng-model="signup.username">{{signup}} 
</form> 

Và chỉ thị của tôi là như thế này:

app.directive("formValid",function(){ 

return { 
    restrict:"A", 
    require:"ngModel", 
    link:function(scope,element,attrs){ 
      scope.$watch(attrs.ngModel,function(newValue){ 
       if(newValue){ 
       console.log(newValue); 
       } 
      }); 
     } 
    }}); 

Khi nào tôi nhập một số giá trị vào hộp văn bản, mô hình sẽ thay đổi và "$ watch" phải được kích hoạt. Ở đây "$ watch" chỉ được kích hoạt một lần khi lần đầu tiên tôi nhập bất kỳ giá trị nào vào hộp văn bản .Cảm ơn trước.

Answer 1

Một giải pháp sẽ là sử dụng ngModel như trong ví dụ bên dưới.

app.directive("formValid",function(){ 
    return { 
    restrict: 'A', 
    require: 'ngModel', 
    link: function(scope, element, attrs, ngModel) { 
     scope.$watch(function() { 
      return ngModel.$modelValue; 
     }, function(newValue) { 
      console.log(newValue); 
     }); 
     } 
    } 
    }); 

Edit: Các giải pháp nhanh nhất sẽ được làm theo những nhận xét của Blackhole và cập nhật hồ của bạn để một chiếc đồng hồ sâu bằng cách thêm true. Điều này là do bạn đang xem thuộc tính signup nhưng giá trị mô hình username là thuộc tính đăng ký. Đồng hồ sâu sẽ phục vụ để xem các thuộc tính.

Sử dụng ngModel trực tiếp thay vì qua attrs hoặc sử dụng trình định dạng hoặc phân tích cú pháp (như chi tiết trong câu trả lời của Michaels là giải pháp tốt hơn theo quan điểm của tôi).

Answer 2

Khi bạn sử dụng ngModelController, cách tiêu chuẩn để xem những thay đổi về mô hình này là bằng cách tạo ra một formatter:

link: function(scope, element, attrs, ngModelCtrl) { 
    ngModelCtrl.$formatters.push(function(value) { 
     // Do something with value 
     return value; 
    }); 
} 

Hãy ghi nhớ rằng trình định dạng chỉ được kích hoạt khi mô hình được thay đổi trực tiếp. Nếu thay đổi đến từ giao diện người dùng (nghĩa là người dùng thay đổi điều gì đó), thì trình phân tích cú pháp được kích hoạt để thay thế. Vì vậy, bạn có thể cần phải làm điều này cũng như:

ngModelCtrl.$parsers.push(function(value) { 
    // Do something with value 
    return value; 
}); 

Working Plunker

tôi đề nghị bạn đọc ngModelController tài liệu để bạn hiểu chính xác cách thức những đường ống làm việc.

Nhưng nếu tất cả các bạn muốn làm là nhận được thông báo khi thay đổi mô hình (bạn không muốn hoặc cần không phải định dạng hay phân tích bất cứ điều gì), sau đó bạn có thể làm một cái gì đó đơn giản hơn:

scope: { model: '=ngModel' }, 
link: function(scope) { 
    scope.$watch('model', function(value) { 
     // Do something with value 
    }); 
} 

Working Plunker

Nhưng với tên chỉ thị của bạn, formValid, tôi nghĩ rằng việc sử dụng ngModelController là cách tiếp cận chính xác.

CẬP NHẬT

Đó là đáng nói đến là ngModelController có cho là một thiếu sót: nó không hoạt động rất tốt với các loại "tham khảo" (ví dụ mảng, đối tượng). Bạn có thể tìm thêm chi tiết về số điện thoại here.