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

您可以看到我正在尝试检查该元素是否是一个＆＃39;选择＆＃39;元素，但我不确定角度的链接方法/函数如何读取元素。我可以用字符串检查它，就像我做的那样吗？（当我尝试这个顺便说一句时，它不起作用）。

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

Answer 1

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

Answer 2

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

这里有更新的代码，让我可以使用ng-change和ng-click。我刚刚在click上添加了bind，并使用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() {
                    });
                    });
                }

            }
        }
    }
]);

角度指令检查元素？

2 个答案: