Giao diện người dùng dạng câu hỏi mở được giải quyết trước khi phương thức được hiển thị

Question

Tôi đang cố gắng thực thi tập lệnh jQuery trên phương thức đã mở để chuyển đổi một trong các trường thành jQuery UI Spinner.

Tôi đang sử dụng lời hứa opened như được ghi trong Angular UI.

ISSUE: Bộ chọn jQuery không hoạt động như mong đợi và không truy xuất bất kỳ thứ gì.

Vì vậy, một trong những chức năng điều khiển của tôi trông như thế:

var modalInstance = $modal.open({ 
    templateUrl: 'modalDialog.html', 
    controller: modalCtrl, 
    resolve: { 
     noOfItems: function(){ 
      return $scope.noOfItems; 
     } 
    } 
}); 

modalInstance.opened 
    .then(function() { 
     $(".spinner").spinner({ 
      max: 20, 
      min: 1 
     }); 
    }); 

modalInstance.result 
    .then(function() { 
     console.log("modal closed"); 
    }); 

Và HTML của tôi:

<script type="text/ng-template" id="modalDialog.html"> 
    <div class="modal-header"> 
     <h4 class="modal-title">My Modal</h4> 
    </div> 
    <div class="modal-body"> 
     <input class="form-control spinner" type="text" ng-model="noOfItems" /> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn btn-default" ng-click="cancel()">Cancel</button> 
     <button class="btn btn-primary" ng-click="save()">Save</button> 
    </div> 
</script> 

Các modalCtrl là không thích hợp.

GỢI Ý: Tôi đã thử đặt một debugger ngay khi lời hứa opened được gọi và phát hiện ra các phương thức không mở được nêu ra.

FYI, tôi đang sử dụng jQuery 1.9.0, jQuery UI 1.10.4, AngularJS 1.2.16 và Angular UI Bootstrap v0.11.

Answer 1

Bạn đang tiếp cận vấn đề từ góc sai, cố gắng thực hiện thao tác DOM cấp thấp từ bộ điều khiển. Đây là một không lớn không có trong thế giới AngularJS và bạn sẽ giúp bạn có được tất cả các loại rắc rối xuống đường.

Logic giao diện người dùng của bạn không được "chờ" cho nút DOM nhất định sẽ được thêm vào cây DOM nhưng thay vào đó phải được biểu thị một cách rõ ràng. Trong trường hợp này có nghĩa là bạn nên viết một "trượt" chỉ thị, một cái gì đó đơn giản như:

yourModule.directive('mySpinner', function() { 
    return { 
    link: function(scope, elm) { 
     elm.spinner({ 
     max: 20, 
     min: 1 
     }); 
    } 
    }; 
}); 

và sau đó sử dụng này chỉ mới được xác định từ trong mã HTML phương thức của:

<input class="form-control spinner" type="text" my-spinner ng-model="noOfItems"/> 

này theo cách bạn không cần phải lo lắng khi nội dung của phương thức được thêm vào DOM và, bạn đã tạo cho mình một cách có thể tái sử dụng để xác định spinners!

Quay lại câu hỏi có liên quan đến phương thức $ - lời hứa opened được giải quyết khi tất cả dữ liệu sẵn sàng và phương thức sẽ được hiển thị (hoạt ảnh bắt đầu, v.v.) để có thể hiển thị các chỉ báo chờ hoặc tương tự. Không có nghĩa là nó được thiết kế để biết khi nào nội dung của phương thức được chèn vào cây DOM như với AngularJS, kiến ​​thức này không thực sự cần thiết hầu hết thời gian.