Angular directive check element?

Question

I'm hooking up a $modal service for confirmation boxes in my app and made a directive that only works for ng-click. Well I also need it to work for ng-change so I did it like the following:

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

You can see I'm trying to check if the element is a 'select' element but I'm not sure how angular's link method/function reads the element. Can I check it with a string like how I did it? (It doesn't work when I try this btw).

How can I check if the element I'm attaching my directive to is a select?

Do you get any error in your browser console – Ankit Ladhania Aug 27 '14 at 22:30 — Ankit Ladhania, Aug 27 '14 at 22:30
PLease setup a demo. plunkr or jsfiddle – apairet Aug 27 '14 at 23:00 — apairet, Aug 27 '14 at 23:00

score 3 · Answer 1 · edited May 23 '17 at 12:33

3

Angular's jqLite is a subset of jQuery and that is the element parameter passed into the link function (unless you load the full jQuery library, then it will be a jQuery object). As described in this post using element.prop('tagName') will return the element type which is a method included in the jqLite library.

edited May 23 '17 at 12:33

Community

1
1

answered Aug 28 '14 at 00:28

Rob J

6,609
5
28
29

score 3 · Accepted Answer · answered Aug 28 '14 at 22:00

So I got confused and the if statement should of been at the element.bind not at the var modalHtml...

Here's the updated code for me to get this to work with both ng-change and ng-click. I just added bind on click and bind on change with an if statement to check the element.context.tagName was select or not

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

            }
        }
    }
]);

Angular directive check element?

2 Answers2