javascript - 如何管理特定事件指令内的 Controller 范围？

Question

我在 Controller 中定义了范围对象，称为

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

在上面的代码中有模板，我想显示基于标签或输入的范围值。它正在工作，但它适用于所有标签，因为范围值以两种方式绑定(bind)发生变化。 我怎样才能实现特定单元格只得到改变。

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

经过一番思考，我认为解决该问题的最简单方法是向每个单元格添加新变量。我将我的命名为 cellValue。之后，我们将模型值复制到该变量，并从现在开始从该变量中读取它。 我添加了方法 copyOrClone ，它只返回一个变量(javascript 按值传递变量，按引用传递对象)或对象复制(如果我们传递了对象)。您可以阅读更多相关信息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>"