将AngularJS ng-form对象传递给ng-if? [英] Passing AngularJS ng-form object into ng-if?
问题描述
当我单击预览"时，不会禁用预览模式下的保存按钮. http://plnkr.co/edit/I3n29LHP2Yotiw8vkW0i
When I click "preview" here the save button in my preview mode is not disabled http://plnkr.co/edit/I3n29LHP2Yotiw8vkW0i
我认为这是因为表单对象(testAddForm)在ng-if范围内不可用.我知道我应该在控制器中使用一个对象，因为它一直向下传递，但是form对象是由angular创建的，在ng-if中不可用.我该如何解决?
I think this is because the form object (testAddForm) is not available in the scope of the ng-if. I know that I should use an object in my controller because it's passed down all the way, but the form object is created by angular and not available in the ng-if. How can I work around that?
<!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
As a workaround you can try using ng-hide and ng-show instead of ng-if
<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>
这篇关于将AngularJS ng-form对象传递给ng-if?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
