我已经阅读了几篇文章,但没有找到解决我的问题的示例。
我的理解是:
ng-if
和ng-repeat
创建隔离作用域。- 使用
$parent.someProperty
是不好的。 - 使用
$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
。这是我需要了解如何解决的问题。
最佳答案
您可以将设置传递给指令,我认为这是最简单/最直接/最干净的方法。
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 .
关于javascript - 处理 Angular 范围而不是 $parent.$parent 的正确方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35023867/