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

Question

我对 Angular 很陌生，我的项目已经取得了很大的进展，但我遇到了一个小障碍。

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

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

它创建字段，更新输入变量并且条件逻辑起作用! (**将第一个字段设置为“1”，然后在选择中选择“First Choice”)

问题是看起来 super 困惑并且不太容易移植到新文件，所以我想做的就是将其写在指令中。

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

但是，我无法让模型(范围？)正常工作。我自己尝试了很多方法，但我似乎无法概括我需要在这里做什么，以便在 gField 中新创建的输入上创建 ng-model工作指令。

*注意:我知道在第二支笔中所有输入都以文本输入的形式出现，我想先跳过这一部分

如有任何帮助，我们将不胜感激。

Answer 1

想通了!

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

所以在我的 Controller 中我必须使用

来引用范围

$scope.scopeReference = $scope;

然后我将其传递给 <gf-form-fields fields="form.fields" model="scopeReference"></gf-form-fields>

然后在每个指令中，我使用范围属性将其作为“模型”传递

.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));
        }

希望这对某人有帮助!