Angular指令在文本框中添加模板（空格键输入） [英] Angular directive add template on textbox (enter of Spacebar)
问题描述
我正在使用angular js，我的目标是在文本框中显示一个html表格（输入空格键），并在该文本框中添加该表格的元素，为此我编写了一个指令，但我不确定是否我已经在正确的道路上完成了。哦，我会详细地展示它，以便更清楚地显示出来。
以下是我的html文本框 < input type =texthelps ng-model =firstTextcode =1>
< div class =col-xs-4 pull-righthelps donotapply = true>< / div> //我需要这个吗？
这里帮助是我的指令， html到div，这里是我的指令代码
app.directive（'helps'，['$ parse'，'$ http'，'$ filter'，函数（$ parse，$ http，$ filter）{
return {
restrict：'AE'，
scope：true，
templateUrl： 'Table.html'，
link：function（scope，element，attr）{
console.log（element）;
element.bind（keypress，function（event）{
if（event.which === 114 || event.which === 32）{
scope.enterMe = function（）{//这是将数据添加到Table
$ b scope.newArray = [
{'code'：1，'name'：'name1'，'age'：24}，
{'code'：2，'name '：'name2'，'age'：26}，
{'code'：3，'name'：'name3'，'age'：25}
]
};
scope.setElement = function（element）{//这里设置元素函数是将我的表名添加到文本框
var modelValue = tempattr.ngModel +'_value';
var model = $ parse（tempattr.ngModel）;
model.assign（scope，element.name）;
modelValue = tempattr.ngModel +'_value';
modelValue = $ parse（modelValue）;
modelValue.assign（scope，element.code）;
};
}
}
}）;
}
}
}]）;
现在在这里我的Table.html
< div class =col-xs-4 pull-rightng-show =hideMyMtHelpDiv>
< input type =textng-model =searchTextplaceholder =search>
< input type =buttonng-model =gadvalue =GOng-click =enterMe（）;>
< table ng-show =getTableValueclass =table table-bordered table-responsive table-hover add-lineheight table_scroll>
< thead>
< tr>
< td>
代码
< / td>
< td>
名称
< / td>
< td>
年龄
< / td>
< / tr>
< / thead>
< tbody>
< tr ng-repeat =test in newArrayng-dblclick =setElement（test）;>
< td>
{{test.code}}
< / td>
< td>
{{test.name}}
< / td>
< td>
{{test.age}}
< / td>
< / tr>
< / tbody>
< / table>
< / div>
现在我的问题是，我的表格绑定了我的div以及我的输入文本框;那么，有没有适当的方法来做到这一点？
如果我的问题仍不清楚，请点评。
感谢您的帮助
在这里检查我的运营商 https://plnkr.co/edit/lAUyvYKp1weg69CsC2lg?p=preview
并阅读自述文件
首先，你在input和div中都使用save指令。你可以把它们分开作为第一步：
mod.directive（'onKeydown'，function（）{
return {
restrict：'A'，
scope：{
setShowSearch：'&'
}，
link：function（scope，elem，attrs）{
elem.on（'keydown'，function（event）{
if（event.which === 114 || event.which === 32）{
setShowSearch（）（true）;
}
}）;
}
};
}）;
然后，您可以传递一个函数来将showSearch变量设置为该指令，并将其用于输入：
< input type =textng-model =firstTexthpcode =1on-keydown =设置显示的搜索= setShowSearch/>
既然 setShowSearch 存在于 controller 不是你的指令，所以它有自己的范围。
myApp.controller（'MyController'，['$ scope'，function（$ scope）{
$ scope。 setShowSearch = function（show）{
//在这里做任何你想做的事
};
$ scope.msg ='这个必须工作！';
}] ）;
完成后，您现在有一个干净的指令，它负责显示表格，其余的只是传递该数组以类似的方式向下指向该指令。
希望这有助于。
I am using angular js,My target is to show a html table on (enter of spacebar) in textbox and add the element of the table in that textbox,for that i have written a directive,but i am not sure whether i have done it in right path..Ohk i will show it in detail to be more clear
Here is my html textbox
<input type="text" helps ng-model="firstText" code="1">
<div class="col-xs-4 pull-right" helps donotapply=true></div> //Do i need this??
Here helps is my directive which binds my html to the div,here is my directive code
app.directive('helps', ['$parse', '$http','$filter', function ($parse, $http,$filter) {
return {
restrict: 'AE',
scope: true,
templateUrl: 'Table.html',
link: function (scope, element, attr) {
console.log(element);
element.bind("keypress", function (event) {
if (event.which === 114 || event.which === 32) {
scope.enterMe = function () { // this is to add data to Table
scope.newArray = [
{'code' :1,'name' : 'name1','age' : 24},
{'code' : 2,'name' : 'name2','age' : 26},
{'code' : 3,'name' : 'name3','age' : 25}
]
};
scope.setElement = function (element) { // Here set element function is to add my table name to textbox
var modelValue = tempattr.ngModel + '_value';
var model = $parse(tempattr.ngModel);
model.assign(scope, element.name);
modelValue = tempattr.ngModel + '_value';
modelValue = $parse(modelValue);
modelValue.assign(scope, element.code);
};
}
}
});
}
}
}]);
And Now here my Table.html
<div class="col-xs-4 pull-right" ng-show="hideMyMtHelpDiv">
<input type="text" ng-model="searchText" placeholder="search">
<input type="button" ng-model="gad" value="GO" ng-click="enterMe();">
<table ng-show="getTableValue" class="table table-bordered table-responsive table-hover add-lineheight table_scroll">
<thead>
<tr>
<td>
Code
</td>
<td>
Name
</td>
<td>
Age
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="test in newArray" ng-dblclick="setElement(test);">
<td>
{{test.code}}
</td>
<td>
{{test.name}}
</td>
<td>
{{test.age}}
</td>
</tr>
</tbody>
</table>
</div>
Now my question is that, my table is binded with my div as well as my input textbox; So, is there any proper way to do this?
If my question is still unclear kindly comment. Thank you for any help
Check my plunker here https://plnkr.co/edit/lAUyvYKp1weg69CsC2lg?p=preview and read README
First of all you are using the save directive in both input and div. You can separate those as first step:
mod.directive('onKeydown', function() {
return {
restrict: 'A',
scope: {
setShowSearch: '&'
},
link: function(scope, elem, attrs) {
elem.on('keydown', function(event){
if (event.which === 114 || event.which === 32) {
setShowSearch()(true);
}
});
}
};
});
Then you can pass a function to set your showSearch variable to that directive and use that on your input:
<input type="text" ng-model="firstText" hpcode="1" on-keydown="" set-show-search="setShowSearch"/>
Now that setShowSearch is living in your controller not your directive so it has its own scope.
myApp.controller('MyController', ['$scope', function($scope) {
$scope.setShowSearch = function(show) {
//do whatever you want here
};
$scope.msg = 'This Must Work!';
}]);
Once done you now have a clean directive which is responsible for showing the table and the rest is just passing that array down to that directive in a similar way.
Hope this helps.
这篇关于Angular指令在文本框中添加模板（空格键输入）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
