3
我想使用角度的表單驗證從templateUrl內部的templateUrl。AngularJS - 表單驗證的指令
我有一個加載templateUrl在我所與得到指令範圍NG-需要和NG-正則表達式的值輸入的形式的指令。現在，我試圖把我的指令的範圍 形式：'='，但是當我訪問scope.form時，它是未定義的。
我必須指定我的提交按鈕不在表單之內，並且當單擊ng-click ='save（$ index）'時，它必須首先檢查表單是否有效，然後繼續保存編輯的數據。 scope.save（）在我的指令中定義。
這是模板：
<tr data-ng-repeat="row in source.data " data-ng-class="{'selected':row.$_selected}" >
<td data-ng-repeat="c in settings.columns" data-ng-click="toggleSelect(row)" >
<form name="editForm" id="editForm" novalidate>
<div ng-switch on="c.type" ng-show="editMode[$parent.$index]">
<span ng-switch-when="text" >
<input type="{{c.type}}" data-ng-model="row[c.name]" ng-required="{{c.isRequired}}" ng-pattern="{{c.regex}}"/>
</span>
<span ng-switch-when="select" >
<select data-ng-model="row[c.name]" ng-selected="row[c.name]" ng-init="row[c.name]" ng-options="item.value as item.name for item in c.items" ng-required="{{c.isRequired}}">
<!--<option data-ng-repeat="(value, name) in c.items" value="{{value}}">{{name}}</option>-->
</select>
</span>
<span ng-switch-when="textarea">
<textarea ng-model="row[c.name]" ng-required="{{c.isRequired}}" ng-pattern="{{c.regex}}">
</textarea>
</span>
<span ng-switch-when="checkbox">
<!--<label for="checkboxInput">{{c.name}}</label>-->
<input name="checkboxInput" type="checkbox" data-ng-model="row[c.name]" ng-true-value="{{c.true}}" ng-false-value="{{c.false}}"/>
</span>
<span ng-switch-default="">
{{row[c.name]}}
</span>
</div>
</form>
<span ng-hide='editMode[$parent.$index]'>{{row[c.name]}}</span>
</td>
<td>
<a href="{{row[settings.specialFields.url]}}" class="btn btn-default opacity75" data-ng-if="row[settings.specialFields.url]">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</td>
<td data-ng-if="row[settings.specialFields.isEditable]">
<button ng-click="edit(row)" ng-show="!editMode[$index]" class="btn btn-primary" >
edit {{$index}}
</button>
<button ng-click="save($index)" ng-disabled="" ng-show="editMode[$index]" class="btn btn-primary">
save
</button>
<button ng-click="cancel($index)" ng-show="editMode[$index]" class="btn btn-default">
cancel
</button>
</td>
</tr>
，這是從我的指令：
scope: {
settings: '=',
source: '=',
form: '='
},
templateUrl: function (element, attr) {
return attr.templateUrl || 'src/grid.html';
},
link: function (scope, element, attrs) {
scope.editMode = [];
scope.editing = false;
scope.previousData = {};
scope.edit = function(field) {
scope.editing = scope.source.data.indexOf(field);
scope.editMode[scope.editing] = true;
scope.previousData = angular.copy(field);
};
scope.save = function(index){
console.log(scope.form);
scope.editMode[index] = false;
if (scope.editing !== false) {
//do the saving
scope.editing = false;
}
};
scope.cancel = function(index){
scope.editMode[index] = false;
if (scope.editing !== false) {
scope.source.data[scope.editing] = scope.previousData;
scope.editing = false;
}
}
是否有一個原因，爲什麼你的保存功能必須是形式之外？ – SoEzPz