Question

我有一个使用angularjs 1.3.7的角度项目，并且无法弄清楚为什么我从父级传递属性到子级（每个都有自己的孤立范围）的对象将无法正常传递。从子指令登录到控制台将显示此对象为未定义，而从父级登录到控制台将按预期显示该对象。以下是我目前正在使用的简化版本。

主视图模板：

<parent-directive>

家长指令：

HTML:
<div>
  <div ng-repeat="foo in parentCtrl.foos">
    <child-directive foo="foo" bar="parentCtrl.bar"></child-directive>
  </div>
</div>

javascript:
angular
  .module('parentDirectiveModule', [])
  .directive('parentDirective', function() {   
    var parentDirectiveCtrl = ['$scope', function($scope){
      var parentCtrl = this;
      parentCtrl.foos = [
        {'name': 'foo1', 'id': '1'},
        {'name': 'foo2', 'id': '2'}
      ];
      parentCtrl.bar = {'property': 'name'};
    return {
      scope: {},
      templateUrl: '../parentDirective.html',
      restrict: 'E',
      replace: false,
      controller: parentDirectiveCtrl,
      controllerAs: 'parentCtrl',
      bindToController: true
    }
  }];

儿童指令：

HTML:
<div>
  <span>{{childCtrl.foo}}</span>
  <button ng-click="childCtrl.editBar()">{{childCtrl.bar.property}}</button>
</div>

javascript:
angular
  .module('childDirectiveModule', [])
  .directive('childDirective', function() {   
    var childDirectiveCtrl = ['$scope', function($scope){
      var childCtrl = this;
      console.log(childCtrl.foo);
      console.log(childCtrl.bar);
      childCtrl.editBar = function() {
        // update bar and reflect in the parent controller
      };
    return {
      scope: {
        foo: '=',
        bar: '='
      },
      templateUrl: '../childDirective.html',
      restrict: 'E',
      replace: false,
      controller: childDirectiveCtrl,
      controllerAs: 'childCtrl',
      bindToController: true
    }
  }];

使用上面的代码，控制台登录childCtrl.foo会按预期返回foo对象，但childCtrl.bar将返回undefined。

提前致谢

编辑：修正了拼写

编辑编辑：关闭开放＆＃34;并在

上将bar更改为parentCtrl.bar

Answer 1

尝试将bar="bar"作业更改为：

<div>
    <div ng-repeat="foo in parentCtrl.foos">
        <child-directive foo="foo" bar="parentCtrl.bar"></child-directive>
    </div>
</div>

至少快速浏览可能是导致问题的原因，bar真正undefined。

Answer 2

感谢大家的帮助。所以看起来我的问题实际上与角度处理将属性复制到隔离范围时的驼峰转换方式有关。在child-directive上，我有属性栏=＆＃34; parentCtrl.bar＆＃34;。实际上，我有一个这个属性的驼峰案例名称，更类似于fooBar =＆＃34; parentCtrl.bar＆＃34;。在孤立范围的声明中，角度将作为foobar传递此属性而不是我期待的fooBar。因此，每次我控制登录的childCtrl.fooBar时，我都会得到未定义的。

要解决此问题，我将属性名称更改为foo-bar。 Angular不需要再进行任何转换，并且对象按预期传递。

angularjs嵌套的ng-repeat范围与自定义指令

2 个答案: