How to manage controller scope inside directive for particular event?

Question

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> &nbsp;  : &nbsp; &nbsp; </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;    
});

Answer 1

After some thinking I think the easiest way to solve that problem is to add new variable to each cell. I've named mine cellValue. After that we copy model value to that variable and we read it from that variable from now on. I've added method copyOrClone which just returns a variable (javascript passes variables by value and objects by reference) or object copy in case we've passed the object. You can read more about it here.

bosAppModule.directive('webFactoryCellControlLabel',function($compile, $timeout, webFactoryEvents){

var layoutTableCellControlLabelObj={};

linkFnTableCellControlLabel=function(scope, element, attributes, controllerCtrl) {
scope.labelData="";
scope.lblShow = true;

scope.hideLblEditing = function () {
  $timeout(function() {
  scope.labelCtrlEdit.lblCtrlEdit = false;
  scope.labelCtrlEdit.lblCtrlView = true;
}, 2000);

};
};

layoutTableCellControlLabelObj.scope={
controlId:'=',attributeId:'=',layoutData:'=',
pageObject:'=', cellId:'=',lblProperties: '=', 
attrModel: '=', labelCtrlEdit:'=', lblShow: '=', 
cellValue:'='}; // this is new. value of the cell independent of value change in other cell directives. we get cell value from this variable

linkFnTableCellControlLabel=function(scope, element, attributes, controllerCtrl) {

    // you need this to clone objects
    // copy or clone object function
    function copyOrClone(obj) {
        if (null == obj || "object" != typeof obj) return obj;
        var copy = obj.constructor();
        for (var attr in obj) {
          if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
        }
        return copy;
    }


    scope.labelData="";     
    scope.lblShow = true;
    scope.hideLblEditing = function () {
       $timeout(function() {                
           scope.labelCtrlEdit.lblCtrlEdit = false; 
            scope.labelCtrlEdit.lblCtrlView = true; 

        }, 2000);  // 2000ms delay   

    };

    // newly added variable to help in copying object passed trough directive
    var temporaryVariableOrObject = pageObject.collections.objectattribute.rowset[attrIndex].objectattributelabelname;
    scope.cellValue = copyOrClone(temporaryVariableOrObject);
};




layoutTableCellControlLabelObj.template = "<div cell-value='cellValue'"
        + "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> &nbsp;  : &nbsp; &nbsp; </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='cellValue'/> "   // changed model to cellValue
        +"</div>"