Javascript 如何在特定事件的指令内管理控制器范围？

我已经在控制器中定义了称为

      $scope.labelEdit.Data  = {'lblCtrlEdit' : false, 'lblCtrlView' : true, 'inputShow': ''};

我正在访问这个作用域内部指令内部指令（子指令）。我可以访问

我的要求是希望显示基于范围值的标签或输入。 例如：指令代码

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;  
});

bosAppModule.directive（'webFactoryCellControlLabel'，函数（$compile，$timeout，webFactoryEvents）{
var layoutTableCellControlLabelObj={}；
linkFnTableCellControlLabel=函数（范围、元素、属性、controllerCtrl）{
//log（“webFactoryCellControlLabel”）；
范围：labelData=“”；
scope.lblShow=true；
scope.hideLblEditing=函数（）{
$timeout（函数（）{
scope.labelCtrlEdit.lblCtrlEdit=false；
scope.labelCtrlEdit.lblCtrlView=true；
}，2000）；//2000ms延迟
};
};
LayoutTableCellControlAbelobj.scope={controlId:'='，attributeId:'='，layoutData:'='，pageObject:'='，cellId:'='，LBLProperty:'='，attrModel:'='，labelCtrlEdit:'='，lblShow:'='}；
layoutTableCellControlLabelObj.restrict='AE'；
layoutTableCellControlLabelObj.replace='true'；
layoutTableCellControlLabelObj.transclude='true'；
layoutTableCellControlLabelObj.template=“”
+“{{labelData}}：”
+ ""
+"  "
+""
+ "";
layoutTableCellControlLabelObj.link=linkFnTableCellControlLabel；
返回layoutTableCellControlLabelObj；
});

在上面的代码中有一个模板，我想显示基于标签或输入的范围值。它正在工作，但它占用了所有标签，因为范围值在双向绑定中发生变化。 我如何才能实现特定的细胞只有得到改变

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;    
});

bosAppModule.directive（'webFactoryCell'，function（$compile，$timeout，webFactoryEvents）{
var containerCellObj={}；
linkFnContainerCell=函数（范围、元素、属性）{
var bindingtypeid=scope.cell.weblayoutcellbindingtypeid；
scope.cellclass=''；
scope.cellProperties={}；
if（scope.selectedDevice==“ipad”）{
//更新we
}
if（scope.cell.WebLayoutCellSubcainer==“false”）{
开关（bindingtypeid）{
案例“43334FBD-23A7-42E9-B737-88642E2F8BB1”：
//控制台日志（“正常控制”）；
//范围：cellclass='webcell webnormalcellstyle col-lg-6 col-md-6 col-sm-4 col-xs-3'；
//正常对照
/*angular.forEach（scope.layoutData.collections.webcontainer.rowset，函数（containerValue，containerKey）{
if（containerValue.webcontainerid==scope.cell.weblayoutcellcontainerid）{*/
元素。追加（“”）；
/*  }
});*/
打破
违约：
打破
}
}
scope.cellClick=函数（事件）{
//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'）；
如果（属性ID）{
webFactoryEvents.setWebFactoryEventsData（{selectedCellId:eventsDataObj.selectedCellId，
attributeId:attributeId}）；
}
webFactoryEvents.cellClickEvent（事件）；
if（eventsDataObj.selectedCellId==scope.cell.weblayoutcellid）{
scope.labelCtrlEdit.inputShow=eventsDataObj.selectedCellId；
scope.labelCtrlEdit.lblCtrlView=true；
}
};
scope.labelControlEditing=函数（）{
scope.labelCtrlEdit.lblCtrlEdit=true；
//scope.labelCtrlEdit.lblCtrlView=false；
//scope.labelCtrlEdit.inputShow=false；
$timeout（函数（）{
范围：$broadcast（'labelCtrlEdit.lblCtrlEdit'）；
}, 10);
};
$compile（element.contents（））（范围）；
};
//containerCellObj.transclude='true'；
containerCellObj.restrict='AE'；
containerCellObj.replace='true'；
containerCellObj.scope={layoutData:'='，pageObject:'='，mapperData:'='，cell:'='，cellclass:'='，selectedDevice:'='，labelCtrlEdit:'='}；
containerCellObj.template=“”
//+“{cell.weblayoutcellorderno}}##cell{cell.weblayoutcellid}”
+ "" 
+“
”
+""          
+""
+""
+""
+""
+""
+“
”
+ ""
+ "";
containerCellObj.link=linkfncainercell；
返回集装箱cellobj；
});

经过思考，我认为解决这个问题的最简单方法是在每个单元格中添加新变量。我把我的名字命名为

cellValue

。之后，我们将模型值复制到该变量，并从现在开始从该变量读取它。 我添加了方法copyOrClone，它只返回一个变量（javascript通过值传递变量，通过引用传递对象），或者在传递对象时返回对象副本。你可以阅读更多关于它的内容

bosAppModule.directive（'webFactoryCellControlLabel'，函数（$compile，$timeout，webFactoryEvents）{
var layoutTableCellControlLabelObj={}；
linkFnTableCellControlLabel=函数（范围、元素、属性、controllerCtrl）{
范围：labelData=“”；
scope.lblShow=true；
scope.hideLblEditing=函数（）{
$timeout（函数（）{
scope.labelCtrlEdit.lblCtrlEdit=false；
scope.labelCtrlEdit.lblCtrlView=true；
}, 2000);
};
};
layoutTableCellControlLabelObj.scope={
controlId:'='，attributeId:'='，layoutData:'=
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>"