AngularJS: вложенные директивы - передача данных не работает

Question

AngularJS: вложенные директивы - передача данных не работает

0

Я пытаюсь создать директиву внутри другой директивы, в то время как первая директива получает массив и для каждого элемента массива вызывается другая директива.

У меня возникли проблемы с правильной передачей данных.

Plunker

Вот мой код:

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>

большое спасибо

Avi

אVי 07 июль 2015, в 10:19

Источник

Теги:

angularjs

angularjs-directive

2 ответа

0

Как вы упомянули, вы хотите вызвать другую директиву для каждого элемента массива.

вы можете сделать это таким образом.

HTML:

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

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

директива ('secondDirective', 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.

Вот Плункер

RIYAJ KHAN 07 июль 2015, в 09:29

0

Спасибо, но мне нужно отобразить первую директиву несколько раз на странице, и я не хочу повторять ng много раз. Вот почему я не сделал это по-вашему (нг-повтор).
אVי 07 июль 2015, в 12:11

Ещё вопросы

Спасибо, но мне нужно отобразить первую директиву несколько раз на странице, и я не хочу повторять ng много раз. Вот почему я не сделал это по-вашему (нг-повтор).

אVי · Accepted Answer · 2015-07-07T12-07-00.000Z

Благодарю всех.

Это решение, с которым я работаю.

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

.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>