ng-click =“ someFunction”作为ng-click =“”

时间:2019-08-05 07:10:24

标签: javascript angularjs

我有以下HTML元素:

<re-button btn-type="primary" 
    re-permission="UpdateMaintenanceRequest" 
    ng-disabled="isSending || !model.IsCompanyEmailValid || !validSelection || sendEmailForm.ccEmail.$invalid" 
    ng-click="formOptions.save()" 
    id="send"
    ng-show="model.EmailType != 'QuoteRequestOwnerApproval'" 
    text="Send">
</re-button>

但是,当我在Chrome中检查元素时,它的显示方式为:

<button class="btn no-transition btn-primary 
    ng-scope" btn-type="primary" 
    re-permission="UpdateMaintenanceRequest" 
    ng-disabled="checkDisabled()" 
    ng-click="" 
    id="send" 
    ng-show="model.EmailType != 'QuoteRequestOwnerApproval'" 
    text="Send" type="button">Send
</button>

为什么按钮的HTML代码如此不同?

如果ng-click="",怎么可能仍在调用$scope.sendEmail()(我使用断点来确保它被调用了)。

我不是Javascript专家,但是它与以下代码有关吗?:

$scope.formOptions = {
    beforeSave:function(callback){
        var selected = _.filter($scope.model.EmailContacts, {IsSending:true});
        if(selected && selected.length > 0)
            callback(true);
        else{
            callback(false);
        }
    },
    resource: function () {
        if ($scope.model.EmailType != $scope.emailTypeEnum.QuoteRequestOwnerApproval.Name) {
            return $scope.sendEmail();
        }
        else {
            return $scope.previewEmail();
        }
    }
};

编辑:

这是reButton指令:

(function() {
    'use strict';

    angular.module('app.components')
        .directive('reButton', directiveFn);

    //directiveFn.$inject = ['context'];
    function directiveFn() {
        var directive = {
            restrict:'E',
            priority:100,
            scope:true,
            replace:true,
            template: '<button class="btn no-transition" />',
            compile:compileFn
        };
        return directive;

        function compileFn(tEle, tAttrs) {
            init();
            return postLinkFn;

            function init() {

                if (tAttrs.btnSize && tAttrs.btnSize !== '') {
                    tEle.addClass('btn-' + tAttrs.btnSize);
                }

                if (tAttrs.type) {
                    tEle.attr('type', tAttrs.type);
                } else {
                    tEle.attr('type', 'button');
                }

                if (tAttrs.btnType.indexOf('icon') < 0) {
                    if (tAttrs.text && tAttrs.text !== '') {
                        tEle.html(tAttrs.text);
                    }
                    else {
                        throw new Error('required text');
                    }
                } 
                else {
                    if (tAttrs.iconType === '' || !angular.isDefined(tAttrs.iconType)) {
                        throw new Error('Please provide icon type');
                    }
                }

                if (tAttrs.btnType) {

                    //if the icon attribute is not set then no need to put an icon html 
                    var iconTemplate = null;
                    if(tAttrs.iconType)
                    {
                        iconTemplate = '<span class="fa ' + tAttrs.iconType + '"></span>';
                        if (tAttrs.iconType && tAttrs.iconType.indexOf('icon-pt') >= 0) 
                        {
                            iconTemplate = '<span class="' + tAttrs.iconType + '"></span>';
                        }
                    }

                    switch (tAttrs.btnType) {
                        case 'primary':
                            tEle.addClass('btn-primary');
                            $(tEle).prepend(iconTemplate?(iconTemplate + '&nbsp;&nbsp;'):'');
                            break;
                        case 'link':
                            tEle.addClass('btn-link');
                            break;
                        case 'secondary':
                            tEle.addClass('btn-secondary');
                            break;
                        case 'cancel':
                            tEle.addClass('btn-cancel');
                            break;
                        case 'card-icon':
                            tEle.addClass('btn-icon card-icon');
                            $(tEle).html(iconTemplate);
                            break;
                        case 'content-icon':
                            tEle.addClass('btn-icon content-icon');
                            $(tEle).html(iconTemplate);
                            break;
                        case 'grid-icon':
                            tEle.addClass('btn-icon grid-icon');
                            $(tEle).html(iconTemplate);
                            break;
                        case 'page-icon':
                            tEle.addClass('btn-icon page-icon');
                            $(tEle).html(iconTemplate);
                            break;
                        case 'link-icon':
                            tEle.addClass('btn-icon link-icon');
                            $(tEle).html(iconTemplate);
                            break;
                        case 'modal-icon':
                            tEle.addClass('btn-icon modal-icon');
                            $(tEle).html(iconTemplate);
                            break;
                        case 'btn-icon-prepend':
                            tEle.addClass('btn-default btn-icon-prepend');
                            tEle.html($('<span></span>').html(tAttrs.text));
                            $(tEle).prepend(iconTemplate?(iconTemplate + '&nbsp;&nbsp;&nbsp;'):'');
                            break;
                        default:
                            tEle.addClass('btn-default');
                            $(tEle).prepend(iconTemplate?(iconTemplate + '&nbsp;&nbsp;&nbsp;'):'');
                            break;
                    }
                }
                else {
                    throw new Error('require button type');
                }
            }

            function postLinkFn(scope, ele, attr) {
                var oriTitle = attr.title;
                attr.$observe('disabled', function(val) {
                    var titleDisabled = attr.titleDisabled;
                    if (val && titleDisabled) {
                        ele.attr('title', titleDisabled);
                    } else {
                        ele.attr('title', oriTitle);
                    }
                });
            }
        }
    }

})();

0 个答案:

没有答案
相关问题