当我单击"预览"此处的预览模式下的"保存"按钮http://plnkr.co/edit/i3n29lhp2yotiw8vkwkw0i
我认为这是因为ng-if的范围中不可用形式对象(testAddform)。我知道我应该在控制器中使用一个对象,因为它已一直传递,但是表单对象是由Angular创建的,而NG-IF中不可用。我该如何处理?
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js@1.2.27" data-semver="1.2.27" src="https://code.angularjs.org/1.2.27/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="TestController">
<form name="testAddForm" novalidate>
<div ng-if="!previewMode">
<input name="title" ng-model="data.title" required />
<p ng-show="testAddForm.title.$invalid && !testAddForm.title.$pristine" class="help-block">Title is required.</p>
<div>
<input type="button" value="Preview" ng-click="preview(true)" />
<input type="button" value="Save" ng-disabled="testAddForm.$invalid"/>
</div>
</div>
<div ng-if="previewMode">
<h2>{{data.title}}</h2>
<div>
<input type="button" value="Cancel" ng-click="preview(false)" />
<input type="button" value="Save" ng-disabled="testAddForm.$invalid"/>
</div>
</div>
</form>
</body>
</html>
JS:
angular.module('app', []);
angular.module('app').controller('TestController', ['$scope', function($scope) {
$scope.data = {};
$scope.previewMode = false;
$scope.preview = function(show) {
$scope.previewMode = show;
};
}]);
作为解决方法,您可以尝试使用ng-hide和ng-show而不是ng-if-if
示例plunkr
<form name="testAddForm" novalidate>
<div ng-hide="previewMode">
<input name="title" ng-model="data.title" required />
<p ng-show="testAddForm.title.$invalid && !testAddForm.title.$pristine" class="help-block">Title is required.</p>
<div>
<input type="button" value="Preview" ng-click="preview(true)" />
<input type="button" value="Save" ng-disabled="testAddForm.$invalid"/>
</div>
</div>
<div ng-show="previewMode">
<h2>{{data.title}}</h2>
<div>
<input type="button" value="Cancel" ng-click="preview(false)" />
<input type="button" value="Save" ng-disabled="testAddForm.$invalid"/>
</div>
</div>
</form>
输入字段放置在ng-if条件内,如果ng-if为false,则内部元素不在dom中。由于在预览模式下,您的输入字段不在DOM中,因此在验证表格时未考虑。
一个简单的修复方法是使用ng-show,这样:
<div ng-show="!previewMode">
plunkr