2013-10-21 12 views
5

Tôi có một chỉ thị đơn giảngóc - Lắng nghe về biến đổi nhúng

angular.module('myApp') 
    .directive('myDirective', function() { 
     return { 
      template: '<p ng-transclude></p>', 
      restrict: 'A', 
      transclude: true, 
      link: function postLink(scope, element, attrs) { 
      } 
     } 
    } 
); 

Tôi cố gắng để chạy mã mỗi lần thay đổi nội dung nhúng và chỉ được trả lại - tôi cần những nội dung nhúng.

Ví dụ thuật toán tôi muốn chạy trong trường hợp này là:

  • từ đếm nội dung nhúng.

Tôi đã thử scope.$watch ở nhiều hình thức nhưng không có kết quả.

Trả lời

11

Chúng tôi có thể sử dụng jqlite bao gồm trong Angular bên trong một hàm biểu thức đồng hồ để thực hiện việc này. Dưới đây là mã xem chiều dài của phần tử được nhúng chéo bằng cách sử dụng jqLite (element.text(). Length). Đồng hồ sẽ kích hoạt bất cứ khi nào độ dài của phần tử mà chỉ thị này được gắn vào các thay đổi.

Và độ dài mới được chuyển thành newValue cho hàm thứ hai trong đồng hồ (vì chúng tôi trả về từ chức năng đồng hồ đầu tiên).

myApp.directive('myDirective', function() { 
    return { 
     template: '<p ng-transclude></p>', 
     restrict: 'A', 
     transclude: true, 
     replace: true, 
     link: function (scope, element, attrs) { 

      scope.$watch(function() { 
       return element.text().length; 
      }, 

      function (newValue, oldValue) { 
       console.log('New Length ', newValue); 
      }); 
     } 
     } 
    }); 

Tôi đã có một jsfiddle làm việc ở đây:

http://jsfiddle.net/2erbF/6/

này đề cập đến kịch bản word count/lá thư. Nhưng bạn có thể tự mình viết một bài kiểm tra trên chính bản thân số element.text() nếu bạn cần nó để kích hoạt bất kỳ thay đổi nào - không chỉ thay đổi độ dài.

+1

Cảm ơn bạn rất nhiều. Tất cả những gì tôi phải làm là xem một chức năng !!! Tôi không thể tin rằng tôi đã không thử điều đó. :) –

Các vấn đề liên quan