Angular指令檢查元素？

我在我的應用程序中連接了確認框的$ modal服務，併發出了一條只適用於ng-click的指令。嗯，我還需要它來爲NG-變化工作，所以我這樣做是這樣的：Angular指令檢查元素？

.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() { 
      }); 
     }); 
     } 
    } 
    } 
]);

你可以看到我想要檢查元素「選擇」元素，但我不知道如何角度的鏈接方法/函數讀取元素。我可以用像我這樣做的字符串來檢查它嗎？（當我嘗試這個btw時它不起作用）。

如何檢查我附加指令的元素是否爲select？

來源

2014-08-27 Garuuk

你得到任何錯誤在你的瀏覽器控制檯 – 2014-08-27 22:30:02

請設置一個演示。 plunkr或jsfiddle – apairet 2014-08-27 23:00:21

所以我就困惑和的if語句應該一直處於不使用var modalHtml的element.bind ...

下面是更新後的代碼，我得到這個既NG-變化和NG工作-Click。我只是說在點擊綁定的變化綁定與if語句來檢查element.context.tagName是選擇或不

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() { 
        }); 
        }); 
       } 

      } 
     } 
    } 
]);

來源

2014-08-28 22:00:35 Garuuk

Angular的jqLite是jQuery的子集，它是傳遞給鏈接函數的元素參數（除非你加載完整的jQuery庫，那麼它將是一個jQuery對象）。如post中所述，使用element.prop（'tagName'）將返回包含在jqLite庫中的方法的元素類型。

來源

2014-08-28 00:28:53

Angular指令檢查元素？

回答

相關問題