Javascript 如何使用ng模型将自定义指令绑定到视图？-安格拉斯
我正在尝试使用AngularJS开发一个应用程序。我创建了一个自定义指令，试图从中将值显示到表中。这一切都很好。我无法动态绑定在文本框中输入的值。下面是我的HTML和JavaScript代码。请帮帮我。提前谢谢 index.htmlJavascript 如何使用ng模型将自定义指令绑定到视图？-安格拉斯,javascript,html,json,angularjs,ng-bind,Javascript,Html,Json,Angularjs,Ng Bind,我正在尝试使用AngularJS开发一个应用程序。我创建了一个自定义指令，试图从中将值显示到表中。这一切都很好。我无法动态绑定在文本框中输入的值。下面是我的HTML和JavaScript代码。请帮帮我。提前谢谢 index.html <html ng-app="myApp"> 测试 {{test1}}{{test2} app.js var mod = angular.module('myApp', []); mod.directive('myDir', functi
<html ng-app="myApp">
测试
{{test1}}{{test2}
var mod = angular.module('myApp', []);
mod.directive('myDir', function() {
var template = function(name, attributes) {
var tempStr = "<tr>";
var iteration = 1;
for ( var column in attributes.column) {
{
tempStr += "<td>" + attributes.column[column].label
+ " : </td>";
tempStr += "<td>";
tempStr += "<" + attributes.column[column].tag;
for ( var attribute in attributes.column[column]) {
if (attribute != "label" && attribute != "tag") {
tempStr += " " + attribute + '="'
+ attributes.column[column][attribute] + '"';
}
}
tempStr += ' name="' + name + '"';
tempStr += " ng-model=\"test" + attributes.column[column].ng
+ "\">";
// alert(tempStr);
tempStr += "</" + attributes.column[column].tag + "></td>";
// alert(tempStr);
}
iteration++;
}
tempStr += "</tr>";
return tempStr;
};
return {
restrict : "AE",
link : function(scope, element, attrs) {
var attributes = angular.fromJson(attrs.attributes);
var html = template(attrs.name, attributes);
element.html(html);
}
};
mod.controller('myCtrl', function($scope) {
$scope.funJSON = function() {
data = {
"row" : [ {
"column" : [ {
"size" : 20,
"label" : "First Name",
"type" : "text",
"tag" : "input",
"ng" : "1"
}, {
"size" : 20,
"label" : "Last Name",
"type" : "text",
"tag" : "input",
"ng" : "2"
} ],
"id" : 1
} ]
};
$scope.fields = data;
};
var mod=angular.module（'myApp'，[]）；
mod.指令（'myDir'，函数（）{
变量模板=函数（名称、属性）{
var tempStr=“”；
var迭代=1；
for（attributes.column中的var列）{
{
tempStr+=“”+属性。列[column]。标签
+ " : ";
tempStr+=“”；
tempStr+=“”；
//警报（tempStr）；
tempStr+=“”；
//警报（tempStr）；
}
迭代++；
}
tempStr+=“”；
返回tempStr；
};
返回{
限制：“AE”，
链接：函数（范围、元素、属性）{
var attributes=angular.fromJson（attrs.attributes）；
var html=模板（attrs.name，attributes）；
html（html）；
}
};
模块控制器（'myCtrl'，函数（$scope）{
$scope.funJSON=function（）{
数据={
“行”：[{
“列”：[{
“尺寸”：20，
“标签”：“名字”，
“类型”：“文本”，
“标记”：“输入”，
“ng”：“1”
}, {
“尺寸”：20，
“标签”：“姓氏”，
“类型”：“文本”，
“标记”：“输入”，
“ng”：“2”
} ],
“id”：1
} ]
};
$scope.fields=数据；
};
})；您想做什么？将您在表中输入的值保存回您的作用域？您需要一个控制器将其保存到..您希望它们与当前实现绑定到哪里？@AlexScott我忘了在此处添加控制器代码。请现在检查。
var mod = angular.module('myApp', []);
mod.directive('myDir', function() {
var template = function(name, attributes) {
var tempStr = "<tr>";
var iteration = 1;
for ( var column in attributes.column) {
{
tempStr += "<td>" + attributes.column[column].label
+ " : </td>";
tempStr += "<td>";
tempStr += "<" + attributes.column[column].tag;
for ( var attribute in attributes.column[column]) {
if (attribute != "label" && attribute != "tag") {
tempStr += " " + attribute + '="'
+ attributes.column[column][attribute] + '"';
}
}
tempStr += ' name="' + name + '"';
tempStr += " ng-model=\"test" + attributes.column[column].ng
+ "\">";
// alert(tempStr);
tempStr += "</" + attributes.column[column].tag + "></td>";
// alert(tempStr);
}
iteration++;
}
tempStr += "</tr>";
return tempStr;
};
return {
restrict : "AE",
link : function(scope, element, attrs) {
var attributes = angular.fromJson(attrs.attributes);
var html = template(attrs.name, attributes);
element.html(html);
}
};
mod.controller('myCtrl', function($scope) {
$scope.funJSON = function() {
data = {
"row" : [ {
"column" : [ {
"size" : 20,
"label" : "First Name",
"type" : "text",
"tag" : "input",
"ng" : "1"
}, {
"size" : 20,
"label" : "Last Name",
"type" : "text",
"tag" : "input",
"ng" : "2"
} ],
"id" : 1
} ]
};
$scope.fields = data;
};