我已經爲表單字段創建了一個動態的templateUrl,我試圖在ng-repeat中附加ng模型。父指令和表單字段指令都可以工作並生成,但是當我使用ng模型時,它似乎不工作,預輸出不會改變?在這個用例中應用ng-model有一個竅門嗎?它工作,如果我只是使用硬編碼的形式輸入。我一直在關注AngularJS文檔中的example。圍繞表單字段AngularJS ng模型不工作在動態創建的輸入字段
周邊標記:
<form role="form" ng-controller="FormController as formCtrl" novalidate>
<div ng-repeat="field in panel.form_fields">
<form-field field="field"></form-field>
</div>
<fieldset class="form-group clearfix">
<button type="submit" class="btn btn-primary pull-right">Save Progress</button>
</fieldset>
<pre>form = {{models | json}}</pre>
<pre>master = {{master | json}}</pre>
</form>
表單字段的指令:使用
angular.module('formField.directives', [])
.directive('formField', [ '$http', '$compile', function($http, $compile) {
var getTemplateUrl = function(field) {
var type = field.field_type;
var templateUrl = '';
switch(type) {
case 'textfield':
templateUrl = 'components/form-field/fields/textfield.html';
break;
case 'email':
templateUrl = 'components/form-field/fields/email.html';
break;
case 'currency':
templateUrl = 'components/form-field/fields/currency.html';
break;
case 'date':
templateUrl = 'components/form-field/fields/date.html';
break;
case 'dropdown':
templateUrl = 'components/form-field/fields/dropdown.html';
break;
case 'textarea':
templateUrl = 'components/form-field/fields/textarea.html';
break;
case 'hidden':
templateUrl = 'components/form-field/fields/hidden.html';
break;
case 'password':
templateUrl = 'components/form-field/fields/password.html';
break;
case 'checkbox':
templateUrl = 'components/form-field/fields/checkbox.html';
break;
case 'radio':
templateUrl = 'components/form-field/fields/radio.html';
break;
}
return templateUrl;
}
var linker = function(scope, element) {
var templateUrl = getTemplateUrl(scope.field);
$http.get(templateUrl).success(function(data) {
element.html(data);
$compile(element.contents())(scope);
});
}
return {
restrict: 'E',
replace: true,
scope: {
field: '='
},
link: linker
}
}]);
表單字段模板:
<fieldset class="form-group">
<label for="{{field.field_name}}">{{field.field_label}}</label>
<input type="text"
class="form-control"
id="{{field.field_id}}"
name="{{field.field_name}}"
value="{{field.field_value}}"
placeholder="{{field.field_prompt}}"
ng-required="field.field_required"
ng-disabled="field.field_disabled"
ng-model="models[field.field_name]"> // model.test also doesn't work, and need to be able to reference the model dynamically
</fieldset>
控制器從實施例中使用在AngularJS文檔:
.controller('FormController', ['$scope', function($scope) {
$scope.master = {};
$scope.models = {};
$scope.update = function(models) {
console.info('Update');
$scope.master = angular.copy(models);
};
$scope.submit = function() {
console.info('Form Submitted');
};
$scope.cancel = function() {
console.info('Form Cancelled');
};
$scope.clear = function() {
console.info('Form Clear');
$scope.models = {};
}
$scope.reset = function() {
console.info('Form Reset');
$scope.models = angular.copy($scope.master);
};
$scope.reset();
}]);
你可以準備演示嗎?你的指令如何看起來像 – PSL 2014-09-03 01:10:16
你可以添加「表單字段」指令的聲明嗎? – Josep 2014-09-03 01:12:21
您正在使用獨立作用域,它不知道上下文之外的「模型」是什麼。現在看它http://plnkr.co/edit/HOxGGw?p=preview – PSL 2014-09-03 01:21:01