AngularJS：嵌套指令 - 数据绑定 ishu答案

【问题标题】：AngularJS: Nested Directives - Data binding ishuAngularJS：嵌套指令 - 数据绑定 ishu
【发布时间】：2015-07-08 09:42:30
【问题描述】：

我有嵌套指令。

我从第一个发送数据，然后第二个发送数据。

问题是我失去了与主范围的绑定。

这是我的代码： Plunker

（单击按钮会更改主范围内的值，但不会更改指令中的值）

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>

非常感谢

视频

【问题讨论】：

标签： angularjs angularjs-directive angularjs-scope angularjs-bindings

【解决方案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

希望对您有所帮助。

【讨论】：