角指令检查元素？

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

您可以看到我正在尝试检查该元素是否为“选择”元素，但我不确定 Angular 的链接方法/函数如何读取该元素。我可以像我做的那样用字符串检查它吗？ （当我尝试这个 btw 时它不起作用）。

如何检查我将指令附加到的元素是否是一个选择？

Answer 1

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

Answer 2

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

这是我更新后的代码，让我可以同时使用 ng-change 和 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() {
                    });
                    });
                }

            }
        }
    }
]);