Angular.js - hình thức xác nhận có phát ra bất kỳ sự kiện nào không?

Question

Vấn đề là, tôi đang sử dụng ui-router và tôi có hai chế độ xem, một là loại thanh công cụ, thứ hai là nội dung có biểu mẫu.

Bây giờ tôi muốn có nút lưu trên thanh công cụ, nút này sẽ bị tắt nếu biểu mẫu không phải là $valid. Nhưng hai là trên phạm vi hoàn toàn khác nhau, nó giống như:

• rootScope
  • phạm vi thanh công cụ
  • phạm vi nội dung (với form.$valid)

Vì vậy, tôi nghĩ rằng tôi muốn đối phó với nó bằng cách lắng nghe trên một số loại sự kiện hợp lệ $ phát ra bởi biểu mẫu.

Theo những gì Vojta nói here những sự kiện đó nên tồn tại, nhưng tôi không thể tìm thấy chúng quy định bất cứ nơi nào .. và nhìn vào this Tôi không thấy bất kỳ sự kiện ..

tôi có lẽ có thể làm

$scope.$watch('form.$valid', function(newVal, oldVal) { 
    $scope.$emit('validityChange', {'form':newVal}); 
}); 

nhưng cảm thấy thích sử dụng sự kiện thay vì điều này sẽ tốt hơn

Hoặc tôi có nên thử điều gì đó hoàn toàn khác? Lưu ý rằng tôi không thể đặt ui-view của thanh công cụ bên trong ui-view của nội dung .. và accordin thành this, hai giao diện ui chỉ đơn giản là không thể có cùng phạm vi.

Answer 1

Để trả lời câu hỏi trực tiếp: Tôi không biết các sự kiện dạng gốc trong angularjs. Nhưng, như bạn biết, bạn có thể tạo ra các sự kiện của riêng bạn một cách dễ dàng và điều đó sẽ giải quyết vấn đề của bạn.

Nhưng đây là gợi ý của tôi: Bạn đang cố gắng làm cho hai bộ điều khiển giao tiếp với nhau. Sử dụng các sự kiện có thể là cách tiếp cận sai. Sự kiện thực sự nên được sử dụng cho các ứng dụng rộng thông báo như xác thực.

Bạn có thể cấu trúc lại biểu mẫu và gửi nút thành hai chỉ thị chia sẻ cùng một bộ điều khiển. Trong khi họ sẽ không chia sẻ một phạm vi, họ sẽ chia sẻ một đối tượng điều khiển có thể được sử dụng để giao tiếp. Tôi sẽ làm theo cách này.

Cách tiếp cận khác là lồng hai phạm vi vào nhau. Di chuyển mã biểu mẫu vào bộ điều khiển mức cao hơn. Như thế này:

• rootScope
  • chính // mẫu của bạn mã ở đây
    • thanh công cụ // nút gửi có quyền truy cập vào chức năng
    • nội dung // hình thức đã truy cập vào chức năng

Hy vọng rằng sẽ giúp!

Answer 2

Giả sử cả hai chế độ xem của bạn phải có trạng thái khác nhau và cả hai đều nằm trong cùng một Bộ điều khiển chính và Trang HTML chính, bạn có thể sử dụng tên tiểu bang cùng với ng-if để chỉ định điều kiện của bạn.

Cho phép nói "nội dung" trạng thái dành cho chế độ xem nội dung của bạn.

Bây giờ trong thẻ div HTML của bạn có chứa thanh công cụ của bạn, đề cập đến một cái gì đó tình trạng bạn tiết kiệm nút lĩnh vực, tương tự như ví dụ

ng-if = $state.current.name === 'content' && 'nameOfYourForm'.$valid 

này Nếu tình trạng này là hài lòng, gián tiếp có nghĩa là hình thức của bạn là hợp lệ .

Tuy nhiên, bạn sẽ phải viết điều này trong phương thức chạy, sẽ được khai báo trên cùng tệp js như khai báo mô-đun của bạn.

angular.module('nameOfModule' , ['dependency1', ..]). run(run) 

Và sau đó trong phương thức run của bạn, tiêm $ rootScope và $ nhà nước, và tuyên bố và xác định nó như thế này:

function run(stateHandler, .. ,$rootScope, $state) { 
    $rootScope.$state = $state; 
}