angularjs – 如何将包含在ng-include中的表单设置为prestine?

前端之家收集整理的这篇文章主要介绍了angularjs – 如何将包含在ng-include中的表单设置为prestine?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有以下代码
<div modal="modal.shouldBeOpen" close="close()" options="opts">
    <div class="modal-body">
        <form novalidate name="itemForm" style="margin-bottom: 0px;">

其中包含在包含的文件modal.html中

<div data-ng-controller="AdminController">
   <ng-include src="'/Content/app/admin/partials/grid-subject.html'"></ng-include >
   <ng-include src="'/Content/app/admin/partials/modal.html'"></ng-include>
</div>

在我的AdminController控制器中,我尝试使用以下代码将表单重置为原始:

$scope.itemForm.$setPristine();

当我这样做,它告诉我,“itemForm”是未定义的。

有办法可以将表单的内容设置为原始。我认为这是一个范围问题,但我不知道如何解决它。一世
尝试删除第二个包含并直接粘贴代码的一个解决方案。这个解决方案有效。

但是我们希望能够重用代码
所以我想用modal.html的include来做到这一点

请注意,我们想要这样做的原因是因为我们的modal.html具有以下内容

<button
        class="btn float-right"
        data-ng-disabled="itemForm.$pristine"
        data-ng-click="modalReset()"
        data-ng-show="modal.resetButton">
        Reset</button>
</form>

所以我们实际上是在itemForm里面,并希望把它从内部的按钮设置为$ pristine。

这个答案将会破坏所有的规则(即DOM内部的控制器遍历),但是这里呢是…
.controller('AdminController',['$scope','$element',function($scope,$element) {
  $scope.$on('$includeContentLoaded',function() {
    var childFormController = $element.find('form').eq(0).controller('form');
    console.log(childFormController);
    childFormController.$setPristine();
  });
}]);

我们等待ng包含的内容加载,然后从定义AdminController的$元素,我们查找表单元素,选择第一个,然后获取其FormController。

Plunker

如果您只是通过某些用户交互调用$ setPristine(),则不需要查找$ includedContentLoaded事件 – 我只需要这样做,因为我不想创建任何UI组件来触发操作,当控制器首次运行时,表单不存在。

另请参阅AngularJS: Access formController of a form placed inside transcluded directive from parent controller,其中涉及到尝试从父级访问子级的类似问题。

一个更清洁的解决方案:定义一个指令(在ng-include元素上使用它),并将其作为属性传递给AdminController函数。在指令的链接函数中,调用方法并将FormController作为参数传递。然后AdminController将有一个对所需FormController的引用。 (我没有打扰编码,因为我不知道你想要一个解决方案,你必须使用一个指令和ng-include。)

猜你在找的Angularjs相关文章