Angular指令检查元素？

Question

我正在为我的应用程序连接一个$modal服务，用于确认框，并创建了一个仅适用于ng-click的指令。但是我也需要它适用于ng-change，所以我按照以下方式进行了操作：

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

您可以看到，我正在尝试检查元素是否为“select”元素，但我不确定angular的link方法/函数如何读取该元素。我可以像我之前那样使用字符串来检查它吗？（顺便说一句，当我尝试这样做时，它不起作用。）

我该如何检查我要附加指令的元素是否为select元素？

- Garuuk

---

你的浏览器控制台有没有出现任何错误？ - Ankit Ladhania

请设置一个演示。Plunkr或JSFiddle。 - apairet

Answer 1

所以我感到困惑，if语句应该放在element.bind而不是var modalHtml...

这是我更新后的代码，可以同时使用ng-change和ng-click。我只是添加了点击绑定和更改绑定，并使用if语句检查element.context.tagName是否为select

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

            }
        }
    }
]);

- Garuuk

Answer 2

Angular的jqLite是jQuery的一个子集，它是传递到链接函数中的元素参数（除非您加载了完整的jQuery库，否则它将是一个jQuery对象）。如在此文章中所述，使用element.prop('tagName')将返回元素类型，这是jqLite库中包含的一种方法。

- Rob J