我有以下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 + ' '):'');
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 + ' '):'');
break;
default:
tEle.addClass('btn-default');
$(tEle).prepend(iconTemplate?(iconTemplate + ' '):'');
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);
}
});
}
}
}
})();