Question

我发现自己经常重复以下结构，我想简化它：

<container>
  <clock property="data"></clock>
  <calendar property="data"></calendar>
  <alert property="data"></alert>
</container>

使用相对指令

app.directive('clock', function(){
  return {
    restrict: 'E',
    scope: {
      'property': '='
    }
  }
});

如何从每个项目中删除property =“data”并最终在容器级别移动它？

Answer 1

您可以在父指令中设置property="data"并通过其控制器使其可用

您的容器指令

<container property="data">

app.directive('container', function(){
  return {
    restrict: 'E',
    scope: {
      'property': '='
    },
    controller: function($scope){
      this.getData = function(){
        return $scope.property;
      }
    }
  }
});

您的孩子指令

<clock></clock>    

app.directive('clock', function(){
  return {
    restrict: 'E',
    require: '^container',
    link: function(scope, elm, attrs, containerCtrl) {
      console.log(containerCtrl.getData());
    }        
  }
});

require父指令并调用它的关联方法containerCtrl.getData()来获取所需的值。

检查 Demo

简化angularjs中的重复范围属性

1 个答案: