Question

例如：

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

在这个有三个指令的例子中，我需要将directive-sub1 att-name值赋给directive-sub2。实际上我尝试使用$ rootScope也无法正常工作。

请帮助我实现这一目标。我希望能解释清楚。

Answer 1

在指令或控制器之间以角度分享数据的最佳方式是使用工厂，这里是一个在2个指令之间共享数据的简单示例。

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

您可以通过以下示例查看我的Jsfiddle：http://jsfiddle.net/javierif/g1xjfbb7/

版本2

如果你只想为范围赋值并在另一个指令中使用它，我仍然在考虑使用工厂来制作这个摘要的最佳方法，但是你可以在没有工厂的情况下为范围赋值：

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

这是我对这个例子的小提琴：http://jsfiddle.net/98L2mfcm/1/

如何让一个指令将值附加到angularjs中的另一个指令？

1 个答案: