Angular 指令在文本框上添加模板（空格键输入）

Question

我正在使用 Angular js，我的目标是在文本框中（输入空格键）上显示一个 html 表格，并在该文本框中添加表格的元素，因为我已经写了一个指令，但我不确定是否我已经在正确的道路上做到了..哦，我会详细展示它以更清楚

这是我的 html 文本框

<input type="text" helps ng-model="firstText" code="1">
<div class="col-xs-4 pull-right" helps  donotapply=true></div> //Do i need this??

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

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);
                        };
                    }
                }
            });
        }

    }
}]);

现在是我的 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>

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

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

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

Answer 1

首先，您在 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="text" ng-model="firstText" hpcode="1" on-keydown="" set-show-search="setShowSearch"/>

现在setShowSearch 生活在你的controller 而不是你的directive 所以它有自己的scope。

myApp.controller('MyController', ['$scope', function($scope) {
  $scope.setShowSearch = function(show) {
      //do whatever you want here
  };

  $scope.msg = 'This Must Work!';
}]);

一旦完成，您现在就有了一个负责显示表格的干净指令，其余的只是以类似的方式将该数组传递给该指令。

希望这会有所帮助。