Angular 指令在文本框上添加模板(空格键的输入) [英] Angular directive add template on textbox (enter of Spacebar)

问题描述

我正在使用 angular js，我的目标是在文本框中(空格键的输入)上显示一个 html 表格，并在该文本框中添加表格元素，为此我编写了一个指令，但我不确定是否我已经在正确的路径上完成了..哦，我会详细展示它以更清楚

这是我的 html 文本框

<div class="col-xs-4 pull-right" 帮助 donotapply=true></div>//我需要这个吗??

这里 helps 是我的指令，它将我的 html 绑定到 div，这是我的指令代码

app.directive('helps', ['$parse', '$http','$filter', function ($parse, $http,$filter) {返回 {限制:'AE'，范围:真实，templateUrl: 'Table.html',链接:函数(范围、元素、属性){控制台日志(元素)；element.bind(按键"，功能(事件){if (event.which === 114 || event.which === 32) {scope.enterMe = function () {//这是往Table中添加数据范围.newArray = [{'code':1，'name':'name1'，'age':24}，{'code':2，'name':'name2'，'age':26}，{'代码':3，'姓名':'姓名3'，'年龄':25}]};scope.setElement = function (element) {//这里设置元素的作用是把我的表名加到textboxvar modelValue = tempattr.ngModel + '_value';var 模型 = $parse(tempattr.ngModel);模型.分配(范围，元素.名称)；模型值 = tempattr.ngModel + '_value';模型值 = $parse(modelValue);模型值.分配(范围，元素.代码)；};}}});}}}]);

现在这里是我的 Table.html

<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"><头><tr><td>代码</td><td>姓名</td><td>年龄</td></tr></thead><tr ng-repeat="test in newArray" ng-dblclick="setElement(test);"><td>{{test.code}}</td><td>{{test.name}}</td><td>{{test.age}}</td></tr></tbody>

现在我的问题是，我的表格与我的 div 以及我的输入文本框绑定；那么，有没有合适的方法来做到这一点?

如果我的问题仍然不清楚，请发表评论.感谢您的帮助

在这里查看我的 plunker https://plnkr.co/edit/lAUyvYKp1weg69CsC2lg?p=preview并阅读自述文件

解决方案

首先，您在 input 和 div 中都使用了 save 指令.您可以将它们分开作为第一步:

mod.directive('onKeydown', function() {返回 {限制:'A'，范围: {setShowSearch: '&'},链接:功能(范围，元素，属性){elem.on('keydown', 函数(事件){if (event.which === 114 || event.which === 32) {setShowSearch()(true);}});}};});

然后您可以传递一个函数来将您的 showSearch 变量设置为该指令并在您的输入中使用它:

现在 setShowSearch 位于您的 controller 而不是您的 directive 中，因此它有自己的 scope.

myApp.controller('MyController', ['$scope', function($scope) {$scope.setShowSearch = 函数(显示){//在这里做任何你想做的事};$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屋！