I have defined scope object in controller called as
$scope.labelEdit.Data = {'lblCtrlEdit' : false, 'lblCtrlView' : true, 'inputShow': ''};
I'm accessing this scope inside directive inside directive(child directives). i am able to access.
My requirement is want to display the label or input based in scope value. for example : directive code
bosAppModule.directive('webFactoryCellControlLabel',function($compile, $timeout, webFactoryEvents){
var layoutTableCellControlLabelObj={};
linkFnTableCellControlLabel=function(scope, element, attributes, controllerCtrl) {
//console.log("## webFactoryCellControlLabel");
scope.labelData="";
scope.lblShow = true;
scope.hideLblEditing = function () {
$timeout(function() {
scope.labelCtrlEdit.lblCtrlEdit = false;
scope.labelCtrlEdit.lblCtrlView = true;
}, 2000); // 2000ms delay
};
};
layoutTableCellControlLabelObj.scope={controlId:'=',attributeId:'=',layoutData:'=',pageObject:'=', cellId:'=',lblProperties: '=', attrModel: '=', labelCtrlEdit:'=', lblShow: '='};
layoutTableCellControlLabelObj.restrict='AE';
layoutTableCellControlLabelObj.replace='true';
layoutTableCellControlLabelObj.transclude='true';
layoutTableCellControlLabelObj.template = "<div "
+ "layout-data='layoutData' "
+ "page-object='pageObject' "
+ "label-ctrl-edit ='labelCtrlEdit'"
+ "class='col-xs-12 col-sm-12 col-md-6 col-lg-6' "
+ "style='padding-right:0px;padding-left:0px;padding-top: 0;' "
+ ">"
+ "<label ng-show='labelCtrlEdit.lblCtrlView' class='k-label pull-right control-label' style='padding-top: 8px'><div><span style='{{setLabelStyle()}}'>{{labelData}}</span> : </div></label>"
+ "<div ng-if='cellId == labelCtrlEdit.inputShow'>"
+" <input focus-on='labelCtrlEdit.lblCtrlEdit' ng-show='labelCtrlEdit.lblCtrlEdit' type='text' ng-mouseleave='hideLblEditing()' style='margin-right: 10px' class='k-textbox pull-right' ng-model='pageObject.collections.objectattribute.rowset[attrIndex].objectattributelabelname'/> "
+"</div>"
+ "</div>";
layoutTableCellControlLabelObj.link = linkFnTableCellControlLabel;
return layoutTableCellControlLabelObj;
});
In the above code has template in that i want to display label or input based scope values. It's working but it's taking for all label because scope value changing in two way binding. How can i achieve for particular cell only getting change.
bosAppModule.directive('webFactoryCell',function($compile,$timeout, webFactoryEvents){
var containerCellObj={};
linkFnContainerCell = function(scope, element, attributes) {
var bindingtypeid = scope.cell.weblayoutcellbindingtypeid;
scope.cellclass='';
scope.cellProperties = {};
if(scope.selectedDevice=="ipad"){
//update the we
}
if(scope.cell.weblayoutcellsubcontainer=="false"){
switch (bindingtypeid) {
case "43334FBD-23A7-42E9-B737-88642E2F8BB1":
//console.log("## NORMAL CONTROL");
//scope.cellclass='webcell webnormalcellstyle col-lg-6 col-md-6 col-sm-4 col-xs-3';
//NORMAL CONTROL
/*angular.forEach(scope.layoutData.collections.webcontainer.rowset,function(containerValue,containerKey){
if(containerValue.webcontainerid==scope.cell.weblayoutcellcontainerid) {*/
element.append("<web-factory-cell-control "
+ "ng-if='cellcontrol.layouttablecellcontrolcellid==cell.weblayoutcellid' "
+ " ng-repeat='cellcontrol in layoutData.collections.layouttablecellcontrol.rowset' "
+ "control-id='cellcontrol.layouttablecellcontrolcontroltypeid' "
+ "cell-controldata='cellcontrol'"
+ "label-ctrl-edit ='labelCtrlEdit'"
// + " cellclass={{cellclass}} "
+ "></web-factory-cell-control>");
/* }
});*/
break;
default:
break;
}
}
scope.cellClick=function(event){
//console.log("jfksdjfjs"+event.target.data.class+$(event.target).attr("class"));
webFactoryEvents.setWebFactoryEventsData({selectedCellId:$(event.target).closest(".webcell").attr("id")});
var eventsDataObj = webFactoryEvents.getWebFactoryEventsData();
var attributeId = $('#'+ eventsDataObj.selectedCellId).find('label').parent('div').attr('attrid');
if(attributeId) {
webFactoryEvents.setWebFactoryEventsData({selectedCellId:eventsDataObj.selectedCellId,
attributeId:attributeId});
}
webFactoryEvents.cellClickEvent(event);
if(eventsDataObj.selectedCellId == scope.cell.weblayoutcellid) {
scope.labelCtrlEdit.inputShow = eventsDataObj.selectedCellId;
scope.labelCtrlEdit.lblCtrlView = true;
}
};
scope.labelControlEditing = function() {
scope.labelCtrlEdit.lblCtrlEdit = true;
//scope.labelCtrlEdit.lblCtrlView = false;
//scope.labelCtrlEdit.inputShow = false;
$timeout(function() {
scope.$broadcast('labelCtrlEdit.lblCtrlEdit');
}, 10);
};
$compile(element.contents())(scope);
};
//containerCellObj.transclude='true';
containerCellObj.restrict='AE';
containerCellObj.replace='true';
containerCellObj.scope={layoutData:'=',pageObject:'=',mapperData:'=',cell:'=',cellclass:'=',selectedDevice:'=',labelCtrlEdit:'='};
containerCellObj.template = "<div "
+ "layout-data='layoutData' "
+ "page-object='pageObject' "
+ "mapper-data='mapperData' "
+ "selected-device='selectedDevice' "
+ "label-ctrl-edit ='labelCtrlEdit'"
// + "class='webcell webcellstyle col-lg-6 col-md-6 col-sm-4 col-xs-3' "
+ "ng-class='getCellClass()' "
+ " cellid='{{cell.weblayoutcellid}}' "
+ " id='{{cell.weblayoutcellid}}' "
+ " ng-click='cellClick($event)' "
+ " ng-dblclick='cellDblClick($event)' "
+ " > "
// + "{{cell.weblayoutcellorderno}}##Cell{{cell.weblayoutcellid}}"
+ "<div class='webcell-settings webcontrol-settings'"
+ " ng-class='{commandcellhandle:(cell.weblayoutcellbindingtypeid ==\"0d430cc8-7d7e-4fbb-8ba0-67b7fb9605fa\"),cellhandle:(cell.weblayoutcellbindingtypeid !=\"0d430cc8-7d7e-4fbb-8ba0-67b7fb9605fa\")}' "
+ ">"
+ " <ul><li>"
+"<a><i id='editlabel' class='fa fa-pencil' ng-click='labelControlEditing()'></i></a>"
+"<a><i id='repeat' class='fa fa-repeat disabledfornow' ></i></a>"
+"<a><i id='trash' class='fa fa-trash-o' ></i></a>"
+"<a><i id='up' class='fa fa-arrow-circle-o-up disabledfornow' ></i></a>"
+"<a><i id='down' class='fa fa-arrow-circle-o-down disabledfornow' ></i></a>"
+"<a><i id='edit' class='fa fa-gear' ></i></a>"
+"</li> </ul>"
+ "</div>"
+ "</div>";
containerCellObj.link = linkFnContainerCell;
return containerCellObj;
});
