我使用了指令可以在angular js中编辑bootstrap。 它对于一个模板可以正常工作,但是问题是我需要有条件的多个模板。
在html页面中,我使用了以下指令。
<span isactive="{{rec.IsActive}}" vdstatus="rec" xeditableact></span>
如下。
<a title="Active" data-status="{{VdInfo.IsActive}}"
id="VStatus_{{VdInfo.VendorId}}" data-value="1" data-pk="{{VdInfo.VendorId}}"
class="fa fa-check-circle excludetooltip text-success"></a>
在angular js创建的指令中,如下所示。
return {
restrict: 'A',
scope: {
VdInfo: '=vdstatus'
},
replace: true,
// template: '<ng-include src="template"/>',
templateUrl: function (elem, attrs) {
console.log(attrs.isactive);//it returns {{rec.IsActive}}.want to evalute this value.
//i want some thing as below one.
//if(attrs.isactive){return 'path1';}else{return 'path2';}
return '/Angular/Controller/Vd_Active_Icon.html'
},
link: function (scope, elem, attrs, ctrl) {
// below way its working but bootstrap editable not working. it just updated html. so cannot use.
//scope.template = '/Angular/Controller/Vd_Active_Icon.html';
elem.editable({
type: "select",
url: "/Vendor/ToggleVendorStatus",
params: function (params) {
var data = {};
data['id'] = scope.VdInfo.VendorId;//params.pk;
return data;
},
source: [
{ value: 1, text: 'Active' },
{ value: 0, text: 'Inactive' },
],
success: function (data) {
}
});
}
};