Question

我正在使用角度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

首先，您在输入和div中都使用了save指令。你可以将它们分开作为第一步：

if my_string.match(/widesky_light/)
  return 'something'
end
if my_string.match(/sky_light/)
  return 'something'
end

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

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

             });
        }
    };
});

现在<input type="text" ng-model="firstText" hpcode="1" on-keydown="" set-show-search="setShowSearch"/>生活在setShowSearch而不是controller，所以它有自己的directive。

scope

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

希望这有帮助。

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

1 个答案: