2015-08-03 24 views
5

Điều gì được coi là "watchers" trong Góc? Người xem có phải là người xem duy nhất hay là các cấu trúc góc khác như người xem ngModel không?Điều gì được coi là người quan sát trong Angular?

Hoặc tôi có bỏ lỡ bức tranh lớn không? Ví dụ: người xem có cho phép chỉ thị như ngModel hoạt động không?

cập nhật: Có cách nào để biết thời điểm có người theo dõi không? $ Digest()

+1

Tôi khuyên bạn nên xem bài nói chuyện này từ ng-conf có tên ["Sasqatch is Real"] (https://www.youtube.com/watch?v=wbcJfg-d5nI). Nó nói về mọi thứ tạo ra một chiếc đồng hồ và cho thấy có bao nhiêu chiếc đồng hồ mà tầm nhìn bình thường của bạn có thể kết thúc và tác động đến việc có quá nhiều đồng hồ. – yvesmancera

+0

Cảm ơn bạn đã liên kết - dường như là những gì tôi đang tìm kiếm. – LazerSharks

Trả lời

1

Người theo dõi (nếu chúng tôi chỉ lấy tài liệu bạn dựa vào) là các cơ chế góc để quan sát theo kiểu liên kết hai chiều một biến hoặc một hàm kết quả trong bất kỳ chu kỳ tiêu hóa góc nào; và không có vấn đề gì sự kiện kích hoạt của chu kỳ tiêu hóa sẽ được.

Tôi sẽ gọi "người quan sát" bất kỳ cơ chế Góc nào có thể kích hoạt một số mã dựa trên BẤT CỨ sự kiện có thể xảy ra.

Thông thường, để tạo ra một Watcher, bạn nên sử dụng: $scope.watch(...)

Chỉ cần lưu ý rằng nó tốt hơn để tránh sát chừng nào chúng ta có thể.
Thật vậy, cuộc gọi lại của họ sẽ được kích hoạt tại chu kỳ tiêu hóa EACH để thực hiện kiểm tra bẩn bẩn; thường ảnh hưởng đến hiệu suất.

ng-model không được liên kết với khái niệm người quan sát.
ng-model chỉ là cách để ràng buộc một số biến từ chế độ xem sang bộ điều khiển.
Chúng là hai khái niệm riêng biệt.

+0

Có cách nào để biết khi nào có người theo dõi không? Trong thử nghiệm, tôi muốn biết khi nào để gọi phạm vi. $ Digest() – LazerSharks

+0

Trong Góc, bạn phải tự quản lý vai trò của tiêu hóa khi giao dịch với thử nghiệm. Vì vậy, tiêu hóa được ném ở phía Promise nói chung. Khi bạn muốn giải quyết một lời hứa, bạn phải gọi một thông báo.Ngoài ra, khi bạn muốn đặt thủ công chế độ xemValue trên thành phần biểu mẫu (như đầu vào), chạy một phạm vi $. $ Digest() sẽ cho phép áp dụng ràng buộc. Bất kỳ loại sự kiện nào sẽ kích hoạt thông báo, bạn phải chơi thủ công. – Mik378

2

watchers là gì, nhưng kiểm tra bẩn, mà giữ một ca khúc của các giá trị cũ và giá trị mới

Họ đang nhận được đánh giá trên mỗi chu kỳ tiêu hóa. Nó có thể là sự kết hợp của biến phạm vi hoặc bất kỳ biểu thức nào. Angular thu thập tất cả các watchers này trên mỗi chu kỳ digest và mainatain nó bên trong $$watchers mảng. bạn có thể xem có bao nhiêu người theo dõi bằng cách thực hiện console.log($scope.$watchers) bên trong bộ điều khiển của bạn.

Markup

<body class="container" ng-controller="myCtrl"> 
    Hello {{test}} 
    I'm test to show $$watchers {{test1}} 
    <div ng-show="show">SHowiing this div using ng-show</div> 
    <div ng-if="show">SHowiing this div using ng-show</div> 
    Watcher is not compulsary that should scope variables {{'1'}} 
</body> 

Plunkr

Guess trong mã trên có bao nhiêu người quan sát đang có, như bạn có thể thấy có 3 {{}} chỉ thị suy rằng sẽ đặt trong mảng quan sát và sau đó nếu bạn thấy trong bảng điều khiển $scope.$$watchers nó sẽ hiển thị 5 người theo dõi.

Cách thức hiển thị 5 người xem. Vì chúng tôi chỉ có thể thấy 3, Thực tế chúng tôi đã sử dụng chỉ thị ng-showng-if được đặt trong nội bộ $watch trên biểu thức được cung cấp trong giá trị thuộc tính của nó. & các biểu thức đó được đánh giá trên mỗi chu kỳ tiêu hóa.

Bạn cũng có thể tạo ra watcher tùy chỉnh của bạn bằng cách sử dụng $watch (sâu/đồng hồ đơn giản) & $watchGroup

Ngoài ra bạn có thể có watcher sử dụng $attrs.$observe, điều này không làm việc giống như chiếc đồng hồ nhưng chỉ đặc biệt nó làm việc với biến nội suy.

$attrs.$observe('test',function(value){ 
    alert('') 
}); 

Hầu hết các chỉ thị góc nội bộ sử dụng quan sát như ng-repeat, ng-show, ng-if, ng-include, ng-switch, ng-bind, suy chỉ {{}}, bộ lọc, vv Họ đặt xem trong nội bộ để quản lý điều ràng buộc hai chiều.

+0

Vì vậy, tôi đoán không thể mong đợi người xem chỉ ở một số địa điểm nhất định. I E. không phải lúc nào cũng rõ ràng nơi người xem xuất hiện. Tôi tự hỏi nếu có một danh sách các địa điểm (trong đó chỉ thị góc) người ta có thể mong đợi người xem. – LazerSharks

+0

@Gnuey bạn có thể xem câu trả lời được cập nhật không ... Cảm ơn :) –

1

Để minh họa cách $ đồng hồ(), $ digest() và $ apply() công trình, hãy nhìn vào ví dụ này:

<div ng-controller="myController"> 
{{data.time}} 

<br/> 
<button ng-click="updateTime()">update time - ng-click</button> 
<button id="updateTimeButton" >update time</button> 
</div> 
<script> 
var module = angular.module("myapp", []); 
var myController1 = module.controller("myController", function($scope) { 
    $scope.data = { time : new Date() }; 
    $scope.updateTime = function() { 
     $scope.data.time = new Date(); 
    } 
    document.getElementById("updateTimeButton") 
      .addEventListener('click', function() { 
     console.log("update time clicked"); 
     $scope.data.time = new Date(); 
    }); 
}); 
</script> 

Ví dụ này liên kết với biến $ scope.data.time đến một chỉ thị suy hợp nhất giá trị biến vào trang HTML. Ràng buộc này tạo ra một chiếc đồng hồ nội bộ trên biến $ scope.data.time.

Ví dụ này cũng chứa hai nút. Nút đầu tiên có trình nghe ng-click gắn liền với nó. Khi nhấn nút đó, hàm $ scope.updateTime() được gọi, và sau đó AngularJS gọi $ scope. $ Digest() để các ràng buộc dữ liệu được cập nhật.

Nút thứ hai nhận trình xử lý sự kiện JavaScript chuẩn được đính kèm với nó từ bên trong chức năng điều khiển. Khi nút thứ hai được bấm, chức năng nghe được thực thi. Như bạn có thể thấy, các chức năng nghe cho cả hai nút gần như giống nhau, nhưng khi chức năng nghe của nút thứ hai được gọi, thì ràng buộc dữ liệu không được cập nhật. Đó là vì $ scope. $ Digest() không được gọi sau khi trình nghe sự kiện của nút thứ hai được thực hiện. Do đó, nếu bạn nhấp vào nút thứ hai, thời gian sẽ được cập nhật trong biến $ scope.data.time, nhưng thời gian mới sẽ không bao giờ được hiển thị.

Để khắc phục điều đó chúng ta có thể thêm một phạm vi $ $ digest() gọi đến dòng cuối cùng của người nghe nút sự kiện, như thế này:.

document.getElementById("updateTimeButton") 
    .addEventListener('click', function() { 
console.log("update time clicked"); 
$scope.data.time = new Date(); 
$scope.$digest(); 
}); 

Thay vì gọi $ tiêu hóa() bên trong nút nghe chức năng bạn cũng có thể đã sử dụng $ áp dụng() chức năng như thế này:.

document.getElementById("updateTimeButton") 
    .addEventListener('click', function() { 
$scope.$apply(function() { 
    console.log("update time clicked"); 
    $scope.data.time = new Date(); 
}); 
}); 

Thông báo như thế nào $ phạm vi $ apply() hàm được gọi từ bên trong nút sự kiện người nghe, và làm thế nào bản cập nhật của $ phạm vi Biến .data.time được thực hiện bên trong hàm được truyền làm tham số cho hàm $ apply(). Khi cuộc gọi hàm $ apply() kết thúc AngularJS gọi $ digest() trong nội bộ, vì vậy tất cả các ràng buộc dữ liệu được cập nhật.

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