Wie bekommt man den Wert der one directive attribute in eine andere Direktive in angularjs?

Question

Zum Beispiel:

<directive-main> 
     <directive-sub1 att-name="test"></directive-sub1> 
     <directive-sub2></directive-sub2> 
     </directive-main> 




JS Source Code 


bosAppModule.directive('directive-main',['controlBindingFactory', function(controlBindingFactory) { 

    var layouttablecellcontrol={}; 

    linkLayouttablecellcontrol=function(scope, element, attributes, controllerCtrl) { 
     scope.controlData="NO CONTROL DATA"; 
     angular.forEach(scope.mapperData.collections.controltype.rowset, function (value, index) { 
      if(value.controltypeid==scope.controlId){ 
       scope.controlData=value.controltypename; 
      } 
     }); 
    }; 

    layouttablecellcontrol.scope={controlId:'=',layoutData:'=',pageObject:'=',mapperData:'='}; 
    layouttablecellcontrol.restrict='AE'; 
    layouttablecellcontrol.replace='true'; 
    layouttablecellcontrol.template="<div class='row' ng-repeat='tablecellcontrol in layoutData.collections.layouttablecellcontrol.rowset' " + 
            "ng-if='tablecell.cellid==tablecellcontrol.layouttablecellcontrolcellid' " + 
            "control-id='tablecellcontrol.layouttablecellcontrolcontroltypeid' " + 
            "layout-data='layoutData' " + 
            "page-object='pageObject' " + 
            "mapper-data='mapperData'> " + 
            "<directive-sub1></directive-sub1>" + 
            "<directive-sub2></directive-sub2>" +            
            "</div>"; 

    layouttablecellcontrol.link = linkLayouttablecellcontrol; 

    return layouttablecellcontrol; 
}]); 

bosAppModule.directive('directive-sub1',function($compile){ 
    var layoutTableCellControlLabelObj={}; 

    linkFnTableCellControlLabel=function(scope, element, attributes, controllerCtrl) { 
     scope.labelData="NO DATA"; 
     angular.forEach(scope.pageObject.collections.objectattribute.rowset, function (value, index) { 
      if(value.objectattributeid==scope.attributeId){ 
       scope.labelData=value.objectattributelabelname; 
       scope.attributeName=value.objectattributename; 
      } 
     }); 
    }; 

    layoutTableCellControlLabelObj.scope={attributeId:'=',layoutData:'=',pageObject:'='}; 
    layoutTableCellControlLabelObj.restrict='AE'; 
    layoutTableCellControlLabelObj.replace='true'; 
    layoutTableCellControlLabelObj.template="<div class='col-xs-12 col-sm-12 col-md-6 col-lg-6' attribute-name={{attributeName}} attribute-id='tablecellcontrol.layouttablecellcontrolbindingobjectattributeid' " + 
              "layout-data='layoutData' page-object='pageObject'><label class='k-label pull-right'>{{labelData}}</label></div>"; 

    layoutTableCellControlLabelObj.link = linkFnTableCellControlLabel; 

    return layoutTableCellControlLabelObj; 
}); 

bosAppModule.directive('directive-sub2',['$compile','layoutRenderingControlsFactory','$parse',function($compile,layoutRenderingControlsFactory,$parse){ 
    var layoutTableCellControlRenderObj={}; 

    linkFnTableCellControlRender=function(scope, element, attributes, controllerCtrl) { 
     scope.controlData="NO CONTROL DATA"; 
     var controlContent=""; 

     /*angular.forEach(scope.pageObject.collections.objectattribute.rowset, function (value, index) { 
      if(value.objectattributeid==scope.attributeId){   
       scope.attributeName=value.objectattributename; 
      } 
     });*/ 

     scope.$watch(attributes.layoutTableCellControlLabelRender, function(value){ 
      console.log(value); 
     }); 

     angular.forEach(scope.mapperData.collections.controltype.rowset, function (value, index) { 
      if(value.controltypeid==scope.controlId){ 
       scope.controlData=value.controltypename; 
       controlContent=angular.element(layoutRenderingControlsFactory[scope.controlData](scope.controlId, scope.attributeName)); 
       $compile(controlContent)(scope); 
       element.append(controlContent); 
      } 
     }); 
    }; 
    layoutTableCellControlRenderObj.scope={controlId:'=',layoutData:'=',pageObject:'=',mapperData:'=', cellControlId:'='}; 
    layoutTableCellControlRenderObj.restrict='AE'; 
    layoutTableCellControlRenderObj.replace='true'; 
    layoutTableCellControlRenderObj.template="<div class='col-xs-12 col-sm-12 col-md-6 col-lg-6' ng-attr-id={{cellControlId}} cell-control-id='tablecellcontrol.layouttablecellcontrolcellcontrolid' " + 
              "control-id='tablecellcontrol.layouttablecellcontrolcontroltypeid' " + 
              "layout-data='layoutData' page-object='pageObject' mapper-data='mapperData'></div>"; 
    layoutTableCellControlRenderObj.link = linkFnTableCellControlRender; 

    return layoutTableCellControlRenderObj; 
}]); 

In diesem Beispiel drei Richtlinien, die ich brauche, die richtlinien sub1 att-name Wert richtlinien sub2 zu erhalten. Eigentlich habe ich versucht mit $ rootScope funktioniert auch nicht.

Bitte helfen Sie mir, dies zu erreichen. Ich hoffe, ich habe es gut erklärt.

Answer 1

Die beste Möglichkeit, Daten zwischen Direktiven oder Controllern zu teilen, um eine Fabrik zu verwenden, ist hier ein einfaches Beispiel, um Daten zwischen zwei Direktiven zu teilen.

HTML:

<div ng-app="myApp"> 
    <div ui-foo>I should change iamfoo</div> 
    <br> 
    <div ui-bar att-label="HELLO">I should change to iambar</div> 
</div> 

JS:

angular.module('ui.directives', []).directive('uiBar', 
    function($parse,Data) { 
     return { 
     restrict: 'EAC', 
     require: '?ngModel', 
     link: function($scope, element, attrs, controller) { 
      var controllerOptions, options; 
      element.text(attrs.attLabel); 
      Data.setDataDirectives(attrs.attLabel); 
     } 
     }; 
    } 
) 
    .directive('uiFoo', 
    function(Data) { 
     return { 
     restrict: 'EAC', 
     require: '?ngModel', 
     link: function($scope, element, attrs, controller) { 
      var controllerOptions, options; 
      var changeattr = function() { 
      element.text('iamfoo 4324242'+Data.getDataDirectives()) 
      } 
       $scope.$watch(function(){return Data.getDataDirectives();},function(newValue,oldValue) { 
      changeattr(); 
      }) 
     } 
     }; 
    } 
); 

angular.module('ui.factory',[]).factory('Data', 
function() { 
var dataDirectives; 
return { 
    setDataDirectives: function(data){ 
     dataDirectives = data; 
    }, 
    getDataDirectives: function() { 
    return dataDirectives; 
    } 
} 
}) 
angular.module('myApp', ['ui.directives','ui.factory']); 

Sie können meine Jsfiddle mit diesem Beispiel überprüfen arbeiten: http://jsfiddle.net/javierif/g1xjfbb7/

VERSION 2

Wenn u nur zuweisen möchten Wert zu Umfang und verwenden t seine in einer anderen Richtlinie, das Denken im noch den besten Weg, eine Fabrik ihrer Verwendung dieses abstrakte zu machen, aber u kann ohne Werk Wert Umfang zuweisen:

HTML:

<div ng-app="myApp"> 
    <div ui-foo>I should change iamfoo</div> 
    <br> 
    <div ui-bar att-label="HELLO">I should change to iambar</div> 

</div> 

JS:

angular.module('ui.directives', []).directive('uiBar', 
    function($parse,Data) { 
     return { 
     restrict: 'A', 

     link: function($scope, element, attrs, controller) { 
      var controllerOptions, options; 
      element.text("iambar " + attrs.attLabel); 
      $scope.label = attrs.attLabel; 
     } 
     }; 
    } 
) 
    .directive('uiFoo', 
    function(Data) { 
     return { 
     restrict: 'A', 
     link: function($scope, element, attrs, controller) { 
      var controllerOptions, options; 
      $scope.$watch(function(){return $scope.label;},function(newValue,oldValue) { 
      element.text("iamfoo " + $scope.label) 
      }) 
     } 
     }; 
    } 
); 
angular.module('myApp', ['ui.directives']); 

Und hier ist es meine Geige mit diesem Beispiel: http://jsfiddle.net/98L2mfcm/1/