Question

我必须编写一个显示输入字段（文本）和按钮的Angularjs指令。该指令应带有一些参数，并应使用它们从PgSQL数据库中查找记录：

如果用户单击按钮，则会打开$ mdDialog并使用远程API调用加载数据（加载数据的功能必须写在控制器中并传递给指令）。
< / li>
如果用户填写输入字段并对其进行模糊处理，则必须执行另一个API调用。 API必须检查记录键是否与用户提供的值匹配。如果记录存在，则API必须从数据库返回记录，并填充与其他记录属性相关的其他输入。如果记录不存在，则伪指令必须打开查找$ mdDialog，就像用户单击按钮一样。

我正在尝试这样做，但是我遇到了一些问题（我也在使用Material Design）。

在HTML中，我有此指令（currentItem是从控制器加载的对象。showItemsLookup是打开$ mdDialog的函数）：

<my-lookup id="art_simile" name="art_simile" size="20" maxlength="20"
           ng-model="currentItem.art_simile" data="{{currentItem}}"
           lookup="artico"
           columns="{art_simile : 'articolo',art_simile_descrizione : 'art_descrizione'}"
           error="{{showItemsLookup}}">
</my-lookup>

指令代码为：

app.directive('myLookup',['$http','$q',function($http,$q) {

    var template = `
       <span class="my-lookup">
         <input type="text" id="{{id}}" name="{{name}}"
                ngclass="(class)? class : ''" size="{{size}}"
                maxlength="{{maxlength}}" placeholder="{{placeholder}}"
                ng-readonly="readonly" ng-disabled="disabled"
                ng-model="val" ng-blur="checkLookup($event)" />
         <md-button type="button" class="md-icon-button" 
                    ng-click="{{(error)? error : null}}">
           <md-icon md-font-icon="icon-search-a" class="icon">
           </md-icon>
         </md-button>
       </span>
    `;

    return {

        restrict : 'EA',
        replace : true,
        require : 'ngModel',
        template : template,
        scope : {
            val : '=ngModel'
        },
        link : function(scope,element,attrs) {

            scope.id = attrs.id || '';

            scope.name = attrs.name || '';

            scope.class = attrs.class || '';

            scope.size = parseInt(attrs.size) || 20;

            scope.maxlength = parseInt(attrs.maxlength) || null;

            scope.placeholder = attrs.placeholder || '';

            scope.readonly = attrs.readonly || false;

            scope.disabled = attrs.disabled || false;

            scope.data = attrs.data || {};

            scope.params = attrs.params || {};

            scope.lookup = attrs.lookup || '';

            scope.columns = attrs.columns || {};

            scope.error = attrs.error || null;

            // Perform the API call.
            function _get(registry,config) {
                config = config || {};
                return $http.get(location.protocol + '//' + location.host + '/apis/registry/' + registry + '/get/',config).then(function(res) {
                    return res.data;
                }).catch(function(err) {
                    return $q.reject(err.data);
                });
            }

            // Checks if the record exists or not.
            scope.checkLookup = function(event) {

                if (scope.val) {

                    var config = {id : scope.val};

                    config = angular.extend(params,config);

                    _get(scope.lookup,config).then(function(res) {
                        // The record exists.
                        angular.forEach(scope.columns,function(v,k) {
                            scope.data[k] = res[v];
                        });
                    },
                    function(err) {
                        // The record does not exist.
                        angular.forEach(scope.columns,function(v,k) {
                            scope.data[k] = null;
                        });
                        if (scope.error) scope.error(event,err);
                    });

                }

            };

         }

     };

}]);

我想将整个currentItem对象作为ngModel传递给指令。或者，如果它不是可能的（因为ngModel始终是输入的字符串），我想使用另一个属性（例如示例中的数据）。该指令的属性具有以下含义：

data 是从控制器加载的对象。 lookup 是要调用的API的名称。列是一个将数据键映射到API读取的每个对象的$ mdDialog键的对象。 params 是一个带有额外参数的对象，可以传递给API。错误是当用户填充输入并使输入模糊时调用的函数，而API找不到与该值匹配的记录键。

问题是：

即使ngModel为null，Angularjs材质设计也会显示输入字段，因为它不为空（顶部带有小标签）。
是否可以传递ngModel =“ currentItem”并仅在输入中显示其属性之一？
我注意到我必须通过插值传递不是字符串的属性（即：data =“ {{currentItem}}”“）。有没有一种方法可以不带插值地传递它们，因此字符串必须带引号传递？同样，
我传递了一个像column =“ {name1：'field1'，name2：'field2'}”这样的对象？是否自动识别为对象？因为如果我使用angular.fromJson（），它会给我一个JSON解析错误。

带有对话框的Angularjs复杂查找指令

0 个答案: