如何在 angularjs 中获得进入到另一个指令一个指令属性值?

发布时间: 2017/4/16 4:19:04
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

例如︰

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

在这个例子中有三个指令我需要去到 sub2 指令的指令 sub1 att 名称值。其实我尝试使用 $rootScope 也不工作。

请帮我实现这一目标。我好希望解释。

解决方法 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/

赞助商