2014-08-27 109 views
7

我在我的应用程序中连接了确认框的$ 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?

+0

你得到任何错误在你的浏览器控制台 – 2014-08-27 22:30:02

+0

请设置一个演示。 plunkr或jsfiddle – apairet 2014-08-27 23:00:21

回答

3

所以我就困惑和的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() { 
        }); 
        }); 
       } 

      } 
     } 
    } 
]); 
3

Angular的jqLite是jQuery的子集,它是传递给链接函数的元素参数(除非你加载完整的jQuery库,那么它将是一个jQuery对象)。如post中所述,使用element.prop('tagName')将返回包含在jqLit​​e库中的方法的元素类型。