2

我在页面上有一个表单,如果所有表单元素都在页面上,则验证很好,http://jsfiddle.net/nkanand4/6za8h8xg/1/

<div ng-form="myform">
  <div>
    Name: <input type="text" ng-model="user.name" required name="input"/>
  </div>
</div>

但是,如果我正在做一种向导形式的表单,这将停止工作,其中每个步骤都使用指令http://jsfiddle.net/nkanand4/pe17afvq/2/填充。

<div ng-form="myform">
  <form-element step="selectedStep"></form-element>
</div>

任何有关如何解决此问题的想法将不胜感激。谢谢。

编辑:我最初是从 ng-include 开始的,但放弃了这种方法,因为如果我使用它,数据不会从第 1 步到第 2 步再回到第 1 步。原因是当你来回移动时会创建一个新范围. 因此,我需要一种将所有数据保存在范围属性下的方法,例如 $scope.data.user.name,这样我就可以在请求时将 $scope.data 传回。

4

2 回答 2

2

不要自己编译 HTML,您可以让 Angular 为您正确完成:

.directive('formElement', function($log, $templateCache, $compile) {
    return {
        template: '<div ng-include="\'step\' + selectedStep.step + \'.html\'">',
        link: function(scope, elem, attrs) {
            // ... nothing really here
        }
    };
});

演示:http: //jsfiddle.net/pe17afvq/4/

于 2015-10-09T21:31:06.413 回答
0

终于把它整理好了。这被报告为 angularJS 问题跟踪器上的一个错误,https://github.com/angular/angular.js/issues/7519。诀窍是在使用 $compile 时返回的链接函数中使用克隆。

$compile(html)(scope, function(clone) {
   elem.empty().append(clone);
});

相应地更新了我的jsfiddle,它可以工作!

于 2015-10-16T01:42:49.250 回答