2

ネストされたディレクティブがあります。

最初のデータから 2 番目のデータを送信します。

問題は、メイン スコープへのバインディングが失われることです。

これは私のコードです: プランカー

(ボタンをクリックすると、メインスコープの値が変更されますが、ディレクティブでは変更されません)

angular.module('app', [])

.controller('MainCtrl', function($scope) {
  
  $scope.change = function(){
    var id = Math.floor((Math.random() * 4) + 0);
    var val = Math.floor((Math.random() * 100) + 1);

    $scope.data.items[id].id = val;
  }
  $scope.data = {
    items: [{
      id: 1,
      name: "first"
    }, {
      id: 2,
      name: "second"
    }, {
      id: 3,
      name: "third"
    }, {
      id: 4,
      name: "forth"
    }]
  }
})

.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
  };
});
/* Put your css in here */

.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>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
    <script src="app.js"></script>
  </head> 

 <body ng-controller="MainCtrl">
   
    <h2>MainCtrl</h2>
    {{data}}
    <BR />
<button ng-click="change()">change value</button>
    <div first-directive data="data.items">
    </div>
  </body>

</html>

どうもありがとう

アビ

4

1 に答える 1

1

ネストされたディレクティブが必要な理由がわかりません。物事を過度に複雑にしているようです。データ オブジェクトを 1 つのディレクティブに渡すだけでは、親コントローラーで行った変更はディレクティブでも更新されます。

http://plnkr.co/edit/gR3qBRmDotiUesS6DuyN?p=preview

index.html

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
    <script src="app.js"></script>
  </head> 

 <body ng-controller="MainCtrl">

    <h2>MainCtrl</h2>
    {{data}}
    <BR />
<button ng-click="change()">change value</button>
    <div first-directive data="data.items">
    </div>
  </body>

</html>

template1.html

<div>
  <div class="second-directive" ng-repeat="item in data">
  <h4>Directive</h4>
        ID :{{ item.id }} <br />
        Name : {{item.name }}
  </div>
</div>

app.js

angular.module('app', [])

.controller('MainCtrl', function($scope) {

  $scope.change = function(){

    var id  = Math.floor((Math.random() * 4) + 0);
    var val = Math.floor((Math.random() * 100) + 1);

    $scope.data.items[id].id = val;
  }

  $scope.data = {
    items: [{
      id: 1,
      name: "first"
    }, {
      id: 2,
      name: "second"
    }, {
      id: 3,
      name: "third"
    }, {
      id: 4,
      name: "forth"
    }]
  };

})

.directive('firstDirective', function() {

  return {

    replace: true,
    templateUrl: 'template1.html',
    restrict: 'A',

    scope: {
      data: '='
    },

    link: function(scope, element, attrs) {


    }

  }

});

ネストされたディレクティブが本当に必要な場合は、ディレクティブ定義オブジェクトの require オプションを調べる必要があります。ここで、子ディレクティブのリンク関数に挿入される親ディレクティブ コントローラーを指定できます。その後、子ディレクティブの親ディレクティブ スコープの任意のプロパティにアクセスできます。

参照: https://docs.angularjs.org/api/ng/service/ $compile#directive-definition-object

それが役立つことを願っています。

于 2015-07-08T11:03:51.493 に答える