如何在angularjs中将一个指令的属性值赋给另一个指令？

Question

For example:

  <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 this example having three directives i need to get the directive-sub1 att-name value to directive-sub2. Actually i tried using $rootScope also is not working.

Please help me to achieve this. I hope explained well.

Answer 1

The best way to share data between directives or controllers in angular its to use a factory, here its a simple example to share data between 2 directives.

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']);

You can check my Jsfiddle with this example working: http://jsfiddle.net/javierif/g1xjfbb7/

VERSION 2

If u only want assign value to scope and use this in another directive, im still thinking the best way its use a factory to make this abstract, but u can assign value to scope without factory:

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']);

And here its my fiddle with this example: http://jsfiddle.net/98L2mfcm/1/