Question

我正在尝试在另一个指令中创建一个指令，而第一个指令获取一个数组，并且对于数组中的每个项目调用另一个指令。

我无法正确传递数据。

这是我的代码：

angular.module('app', [])

.controller('MainCtrl', function($scope) {
  $scope.data = {
    items: [{
      id: 1,
      name: "first"
    }, {
      id: 2,
      name: "second"
    }, {
      id: 3,
      name: "third" 
    }]
  }
})

.directive('firstDirective', function() {
  return {

    replace: true,
    restrict: 'A', 
    compile: function(element, attrs) {
      
      var template = ''; 
      angular.forEach(attrs.data, function(item, key) {
          var tmp = '<div>' +
                          // '<h4>First Directive</h4>' +  
                          '{{dataFirst}}' +
                          '<div second-directive data="' + item + '"></div>' +
                    '</div>';
          element.append(tmp);          
      });
    }

  }
})

.directive('secondDirective', function() {
  return {
 
    replace: true,
    restrict: 'A',
    compile: function(element, attrs) {
      var template = '<div class="second-directive">' +
        '<h4>Directive 2</h4>' +
        'ID :' + attrs.data + '<br />' +
        'Name : ' + attrs.data +
        '</div>';

      element.replaceWith(template);
    }
  };
});

.second-directive{
  border:1px solid green;
  padding:4px;
  text-align:center;
  width:100px;
  height:auto;
  overflow:hidden;
  float:left;
  margin:2px;
}

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script src="app.js"></script>
  </head> 

 <body ng-controller="MainCtrl">
    <h2>MainCtrl</h2>
    {{data}}

    <div first-directive data="data.items">
    </div>
  </body>

</html>

非常感谢

阿维

Answer 1

正如您所提到的，您希望为数组中的每个项调用其他指令。

你可以这样做。

HTML：

<body ng-controller="MainCtrl">
    <div first-directive>
        <div ng-repeat="oneEle in  data.items">
          <div second-directive dirval="oneEle">
            </div>

        </div>
    </div>
</body>

指令（＆＃39; secondDirective＆＃39;，function（）{

  var tmp = '<div>' +
              '<div class="second-directive" >'+
              '<h4>Directive 2</h4>' +
              'ID :  {{dirval.id}} <br />' +
              'Name : {{dirval.name}}</div>' +
              '</div>';

  return {

    replace: true,
    restrict: 'A',
    scope: {
      dirval: '='
    },  
    template : tmp


  }
})

如果你想为不同的对象加载动态模板，你可以传入 $ scope.data 对象。

以下是Plunker

Answer 2

谢谢大家。

这是我提出的解决方案。

＆＃13;

angular.module('app', [])

.controller('MainCtrl', function($scope) {
  $scope.data = {
    items: [{
      id: 1,
      name: "first"
    }, {
      id: 2,
      name: "second"
    }, {
      id: 3,
      name: "third"
    }]
  }
})

.directive('firstDirective', function($compile) {
  return {

    replace: true,
    restrict: 'A',
    scope: {
      data: '='
    },
    link: function(scope, element, attrs) {

      var template = '';
      angular.forEach(scope.data, function(item, key) {
        var sss = JSON.stringify(item).replace(/"/g, "'"); 
        var tmp = '<div>' +
          '<div second-directive data="' + sss + '"></div>' +
          '</div>';
          
          template = template + tmp;

      });
            element.html(template);
            $compile(element.contents())(scope);
    }
  }
})

.directive('secondDirective', function() {
   var comp = function(element, attrs){
      var data = JSON.parse(attrs.data.replace(/'/g, "\""));
      var template = '<div class="second-directive">' +
        '<h4>Directive 2</h4>' +
        'ID :' + data.id + '<br />' +
        'Name : ' + data.name +
        '</div>';

      element.replaceWith(template);
    
  }
 
  return {

    replace: true,
    restrict: 'A',
    compile: comp
  };
});

＆＃13;

.second-directive{
  border:1px solid green;
  padding:4px;
  text-align:center;
  width:100px;
  height:auto;
  overflow:hidden;
  float:left;
  margin:2px;
}

＆＃13;

AngularJS：嵌套指令 - 传递数据不起作用

2 个答案: