背景

Question

背景

我正在构建一个自定义表单构建指令。是的，我知道那里已经有很多，谢谢。

在我的指令中使用ngModel，我遍历我的表单的控件对象的JSON数组：

$scope.myForm.controls = [{label: "foo", controlType: "input"}, {label: "bar", controlType: "checkbox"}];

从那里开始，每个表单控件的单个指令中的计划都是$compile。

这是主要指令（正常工作）：

app.directive('myDynamicForm', ['$compile', function ($compile) {

    return {
        restrict: 'E', // supports using directive as element only
        scope: {
            ngModel: "="
        },
        replace: true,
        link: function (scope, element, attrs) {

            angular.forEach(scope.ngModel, function (model) {

                var el = "";

              switch (model.controlType.toLowerCase()) {
              case "input":
                  el = "<my-input ng-model='model'></my-input>";
                  break;
                  default:
                      break;
                }

                $compile(el)(scope);
                element.append(el);
            });
      }
    };
}])

以下是用法：

<my-dynamic-form ng-model="myForm.controls"></my-dynamic-form>

同样，这部分工作正常。

问题

当我创建那些基于指令的新元素时，我需要传递给它们 - 作为他们的ng-model - 在forEach循环中迭代的特定对象主要指令。

所以，这是一个示例控制指令：

directive('myInput', ['$compile', function ($compile) {
   return {
        restrict: 'E',
        scope: {
            ngModel: "="
        },
        replace: true,
        templateUrl: "/templates/input.html",
        link: function (scope, element) {

            var obj = scope.ngModel; //<==SHOULD BE SAME AS "model" IN THE FORM BUILDING DIRECTIVE!!
        }
    };
}])

用法：

<myInput ng-model="[model from parent form building directive]"></myInput>

现在，如果我将child指令的ng-model设置为<my-input ng-model='ngModel'></my-input>，我将得到父指令迭代的相同集合。

如果我将其设置为“model”<my-input ng-model='model'></my-input>，我会将undefined作为子指令的值。

感谢任何帮助。

Answer 1

尝试按索引访问子模型：

app.directive('myDynamicForm', ['$compile', function ($compile) {

return {
    restrict: 'E', // supports using directive as element only
    scope: {
        ngModel: "="
    },
    replace: true,
    link: function (scope, element, attrs) {

        angular.forEach(scope.ngModel, function (model, index) {

            var el = "";

          switch (model.controlType.toLowerCase()) {
          case "input":
              el = "<my-input ng-model='ngModel[" + index + "]'></my-input>";
              break;
              default:
                  break;
            }

            $compile(el)(scope);
            element.append(el);
        });
  }
};
}])

使用AngularJS指令，如何将自定义模型从一个指令传递到另一个指令？

背景

问题

1 个答案: