Avoid $parent.$parent?
For question on SO: http://stackoverflow.com/questions/35023867/proper-method-to-handle-angular-scope-instead-of-parent-parent/35024387#35024387
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<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: '='
}
};
});