javascript - 如何与父范围共享子指令的数据？

Question

我已经编辑了这个问题以简化它

我如何与祖 parent 的范围共享子指令的数据？

我想把数据放到myData属性中

查看:

<generator ng-model="myData"></generator>
myData={{myData|json}}

代码:

var myApp = angular.module('myApp', []);
myApp.directive('generator', function() {
  return {
    restrict: 'E',
    scope: {
      results: '=ngModel'
    },
    template: '<div ng-controller="generatorController"><div ng-repeat="field in fields"><child-widget field-name="{{field}}" ng-model="results[field]"></child-widget></div>results:{{results|json}}</div>'
  }
});
myApp.controller('generatorController', ['$scope', function ($scope) {
  $scope.fields = { fieldA: "A", fieldB: "B", fieldC: "C" };
  $scope.results = {};
}]);
myApp.directive('childWidget', function () {
  return {
    restrict: 'E',
    scope: {
      fieldName: '@fieldName',
      ngModel: '='
    },
    template: '{{fieldName}}: <input type="text" ng-model="ngModel" />'
  }
});

http://jsfiddle.net/sbRBL/5/

Answer 1

使用指令 Controller 而不是在模板中创建ng-controller

这是一个plunker

myApp.directive('generator', function() {
  return {
    restrict: 'E',
    scope: {
      results: '=ngModel'
    },
    controller: 'generatorController',

    template: '<div ng-repeat="field in fields">' +
                 '<child-widget field-name="{{field}}" ng-model="results[field]"></child-widget>' +
              '</div>results:{{results|json}}'
  }
});

---

为什么它不能与 ng-controller 一起工作？

ng-controller 总是创建一个新的(非隔离的)作用域。

这就是您的示例中范围树的样子:

| parent scope
| - generator scope   <====| no data
| --- controller scope  <==| binding
| ----- widget scope

• 您在父作用域和生成器作用域之间建立了双向绑定(bind)
• 您在 Controller 作用域和小部件作用域之间建立了双向绑定(bind)
• 但是生成器作用域和 Controller 作用域之间没有双向绑定(bind)。

在我的示例中，只有 3 个作用域，所以它可以工作:

| parent scope | - generator scope ( same as the controller's scope )| --- widget scope