Angular 无法让 ng-model 在嵌套指令中工作

Question

我对 Angular 很陌生，我已经能够在我的项目中走得很远，但我遇到了一个小障碍。

我想解析一些字段数据，然后将 ng-model 应用于它，以便我可以在字段中使用一些条件逻辑。 我实际上确实有这个工作：

摆弄 HTML 逻辑： https://jsfiddle.net/sup3rmassvie/ws8r4zm5/

它制作字段，更新输入变量，条件逻辑有效！(**将第一个字段设置为"1"，然后在选择中选择"首选")

问题是这看起来超级混乱，不容易移植到新文件，所以我想做的是把它写在指令中。

摆弄指令： https://jsfiddle.net/sup3rmassvie/bzkypvoo/

但是，我无法使模型(范围？？)正常工作。我自己尝试了很多东西，但我似乎无法提前了解我需要在这里做什么来使gField指令中新创建的输入上的 ng-model 工作。

*注意：我知道在第二支笔中所有输入都是文本输入，我想先通过这部分

任何帮助将不胜感激。

Answer 1

想通了！

工作小提琴(仍然只显示文本元素)：https://jsfiddle.net/sup3rmassvie/h7uxtr4q/

所以在我的控制器中，我不得不引用范围

$scope.scopeReference = $scope;

然后我把它传给了<gf-form-fields fields="form.fields" model="scopeReference"></gf-form-fields>

然后在每个指令中，我使用 scope 属性将其作为"模型"向下传递

.directive('gfFormFields', function ()
{
return {
restrict: 'E',
replace: true,
scope:
{
fields: '=',
model: '='
},
template: "<ul><gf-field ng-repeat='field in fields' field='field' model='model'></gf-field></ul>",
};
})

然后在最后一个指令中，我真的只是告诉它"你的范围现在是这个范围">

...
template: "<li class='gf-input'></li>",
link: function (scope, element)
{
var field = scope.field;
scope = scope.model;
scope.field = field;
...add attributes...
element.append($compile(fieldInput)(scope));
}

希望这对某人有所帮助！