javascript - 处理 Angular 范围而不是 $parent.$parent 的正确方法

Question

我已经阅读了几篇文章，但没有找到解决我的问题的示例。

我的理解是:

1. ng-if 和 ng-repeat 创建隔离作用域。
2. 使用 $parent.someProperty 是不好的。
3. 使用 $parent.$parent.someProperty 会令人厌恶。

那么，使用给定的模板标记，我如何才能正确绑定(bind) Controller 以便 Controller 属性更新？

标记:
(注意嵌套的 ng-if 和 ng-repeat，创建了一种 $parent.$parent 的情况)

<div ng-app="MyApp" ng-controller="MyCtrl">
  <div ng-if="showOnCondition">
    <label ng-repeat="item in repeatingItems">
      {{item}}
      <setting item="item" />
    </label>
  </div>
  {{checkSetting()}}
</div>

JavaScript

var myApp = angular.module('MyApp', []);

myApp.controller('MyCtrl', function($scope) {
  $scope.settings = {
    someProperty: '',
    anotherProperty: 'Hello'
  }

  $scope.repeatingItems = [
    'One',
    'Two',
    'Three'
  ];

  $scope.showOnCondition = true;

  $scope.checkSetting = function() {
    // When calling checkSettings(), I would like to access the value of someProperty here
    return $scope.settings;
  }
});

myApp.directive('setting', function() {
  return {
    restrict: 'E',
    require: '^myCtrl',
    // HOW DO I SOLVE THIS?
    // $parent.$parent is bad.
    template: '<input type="radio" ng-model="$parent.$parent.settings.someProperty" name="mySetting" value="{{item}}" />',
    scope: {
      settings: '=',
      item: '='
    }
  };
});

鉴于上述示例，我如何正确构造指令和/或标记以访问 Controller 中的 settings.someProperty？还是我需要做一些完全不同的事情？

澄清
我正在尝试做的事情似乎有些困惑。 someProperty 在指令中可用 - 工作正常。请注意，我正尝试从在指令(使用ng-model)中将值分配给 Controller 的someProperty属性

更新
我已将上面的代码修改为已知的工作代码，并添加了一个 jsFiddle .请注意，它有效，但它在模板中使用了 $parent.$parent。这是我需要了解如何解决的问题。

Answer 1

您可以将设置传递给指令，我认为这是最简单/最直接/最干净的方法。

Angular 正确评估 settings作为MyCtrl.settings , 然后将其传递给 setting 的隔离范围指示。在指令内部，您对 settings 进行了双向绑定(bind)。 ，这样您就可以从那里更新设置。

修改您的示例，传入 settings进入标记中的指令:

<setting settings="settings" item="item" />

然后在 JavaScript 中，将其替换为模板:

template: '<input type="radio" ng-model="settings.someProperty" ng-value="item" name="mySetting" />',

这是一个 working fiddle .