2014-08-27 4 views
7

Я подключаю $ modal сервис для ящиков подтверждения в своем приложении и делаю директиву, которая работает только для ng-click. Ну, я тоже нужно, чтобы работать на нг-изменения, так что я сделал это так:Угловой элемент проверки директивы?

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

Вы можете видеть, что я пытаюсь проверить, если элемент является элементом «выбрать», но я не уверен, как метод/функция метода угловой ссылки считывает элемент. Могу я проверить его с помощью строки, как я это сделал? (Это не работает, когда я пытаюсь использовать этот бит.

Как проверить, является ли элемент, с которым я прикрепляю свою директиву, выбрать?

+0

Вы получаете любую ошибку в вашем браузере консоли –

+0

Пожалуйста, установите демо. plunkr или jsfiddle – apairet

ответ

3

Так что я запутался и, если заявление должно было из в element.bind не в вар modalHtml ...

Вот обновленный код для меня, чтобы заставить это работать как с нг-нг изменения и -Щелкните. Я просто добавил привязку на щелчок и свяжете на изменение с, если заявление, чтобы проверить 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's jqLite является подмножеством jQuery, и это параметр элемента, переданный в функцию ссылки (если вы не загружаете полную библиотеку jQuery, то это будет объект jQuery). Как описано в этом post, используя element.prop ('tagName'), будет возвращен тип элемента, который является методом, включенным в библиотеку jqLite.

Смежные вопросы