Yếu tố kiểm tra chỉ thị góc?

Question

Tôi đang lập một dịch vụ $ modal cho các hộp xác nhận trong ứng dụng của mình và đưa ra một chỉ thị chỉ hoạt động cho ng-click. Vâng, tôi cũng cần nó để làm việc cho ng-change vì vậy tôi đã làm điều đó như sau:

.directive('ngConfirmClick', ['$modal', 
    function($modal) { 
     var ModalInstanceCtrl = function($scope, $modalInstance) { 
      $scope.ok = function() { 
       $modalInstance.close(); 
      }; 
      $scope.cancel = function() { 
       $modalInstance.dismiss('cancel'); 
      }; 
     }; 

    return { 
     restrict: 'A', 
     scope:{ 
      ngConfirmClick:"&", 
      item:"=" 
     }, 
     link: function(scope, element, attrs) { 
      element.bind('click', function() { 
      var message = attrs.ngConfirmMessage || "Are you sure ?"; 

      if(element == 'select'){ 
       var modalHtml = '<div class="modal-body">' + message + '</div>'; 
        modalHtml += '<div class="modal-footer"><button class="btn btn-success" ng-model="" ng-change="ok()">OK</button><button class="btn btn-warning" ng-change="cancel()">Cancel</button></div>'; 
       } else { 
        var modalHtml = '<div class="modal-body">' + message + '</div>'; 
         modalHtml += '<div class="modal-footer"><button class="btn btn-success" ng-click="ok()">OK</button><button class="btn btn-warning" ng-click="cancel()">Cancel</button></div>'; 
       } 


      var modalInstance = $modal.open({ 
       template: modalHtml, 
       controller: ModalInstanceCtrl 
      }); 

      modalInstance.result.then(function() { 
       scope.ngConfirmClick({item:scope.item}); 
      }, function() { 
      }); 
     }); 
     } 
    } 
    } 
]); 

Bạn có thể thấy tôi đang cố gắng để kiểm tra xem phần tử là một yếu tố 'chọn' nhưng tôi không chắc chắn phương thức/hàm liên kết của góc đọc phần tử. Tôi có thể kiểm tra nó bằng một chuỗi như tôi đã làm nó không? (Nó không hoạt động khi tôi thử btw này).

Làm cách nào để kiểm tra xem phần tử tôi đính kèm chỉ thị của tôi có phải là lựa chọn không?

Answer 1

Vì vậy, tôi đã nhầm lẫn và câu lệnh if nên các bị tại element.bind không phải ở var modalHtml ...

Dưới đây là các mã được cập nhật cho tôi để có được điều này để làm việc với cả hai ng-thay đổi và ng -nhấp chuột. Tôi chỉ cần thêm ràng buộc vào nhấp chuột và ràng buộc về biến đổi với một câu lệnh if để kiểm tra element.context.tagName đã chọn hay không

directive('ngConfirmClick', ['$modal', 
    function($modal) { 
     var ModalInstanceCtrl = function($scope, $modalInstance) { 
      $scope.ok = function() { 
       $modalInstance.close(); 
      }; 
      $scope.cancel = function() { 
       $modalInstance.dismiss('cancel'); 
      }; 
     }; 

    return { 
     restrict: 'A', 
     scope:{ 
      ngConfirmClick:"&", 
      item:"=" 
     }, 
     link: function(scope, element, attrs) { 

      console.log(element.context.tagName); 

      if(element.context.tagName == 'SELECT'){ 
        element.bind('change', function() { 
        var message = attrs.ngConfirmMessage || "Are you sure ?"; 

        var modalHtml = '<div class="modal-header"><h4 id="title-color" class="modal-title"><i class="fa fa-exclamation"></i> Please Confirm</h4></div><div class="modal-body">' + message + '</div>'; 
         modalHtml += '<div class="modal-footer"><button class="btn btn-primary" ng-click="ok()">OK</button><button class="btn btn-warning" ng-click="cancel()">Cancel</button></div>'; 


        var modalInstance = $modal.open({ 
         template: modalHtml, 
         controller: ModalInstanceCtrl 
        }); 

        modalInstance.result.then(function() { 
         scope.ngConfirmClick({item:scope.item}); 
        }, function() { 
        }); 
        }); 
       } else { 
        element.bind('click', function() { 
        var message = attrs.ngConfirmMessage || "Are you sure ?"; 

        var modalHtml = '<div class="modal-header"><h4 id="title-color" class="modal-title"><i class="fa fa-exclamation"></i> Please Confirm</h4></div><div class="modal-body">' + message + '</div>'; 
         modalHtml += '<div class="modal-footer"><button class="btn btn-primary" ng-click="ok()">OK</button><button class="btn btn-warning" ng-click="cancel()">Cancel</button></div>'; 


        var modalInstance = $modal.open({ 
         template: modalHtml, 
         controller: ModalInstanceCtrl 
        }); 

        modalInstance.result.then(function() { 
         scope.ngConfirmClick({item:scope.item}); 
        }, function() { 
        }); 
        }); 
       } 

      } 
     } 
    } 
]); 

Answer 2

Angular's jqLite là một tập con của jQuery và đó là tham số phần tử được chuyển vào hàm liên kết (trừ khi bạn tải toàn bộ thư viện jQuery, sau đó nó sẽ là đối tượng jQuery). Như được mô tả trong điều này post sử dụng element.prop ('tagName') sẽ trả về kiểu phần tử là một phương thức có trong thư viện jqLite.