【问题标题】:Angular custom filter with promise inside带有承诺的角度自定义过滤器
【发布时间】:2015-08-05 13:10:13
【问题描述】:

我想要实现的是使用一个过滤器,该过滤器将从ret() 函数返回成功或错误。使用下面的代码,它返回{},这可能是它的承诺。

.filter('postcode', ['$cordovaSQLite', '$q',
function($cordovaSQLite, $q) {
    return function(PostCodeID) {
        function ret() {
            var def = $q.defer();
            ionic.Platform.ready(function() {
                if (window.cordova) {
                    var db = $cordovaSQLite.openDB({
                        name: "msddocapp.db"
                    });
                } else {
                    var db = window.openDatabase("msddocapp.db", "1", "ES Database", 5 * 1024 * 1024);
                }
                var query = "select * from PostCode where ServerID = ?";
                $cordovaSQLite.execute(db, query, [PostCodeID]).then(function(s) {
                    if (s.rows.length > 0) {
                        def.resolve(s.rows.item(0).Title);
                    }
                }, function(e) {
                    console.log(e);
                    def.reject(PostCodeID);
                })
            });
            return def.promise;
        }
        return ret().then(function(s) {
            return s;
        }, function(e) {
            return e;
        });
    }
}]);

这个过滤器只用于一个ng-repeat,所以也许我可以将一个函数绑定到 ng-repeat,比如:

HTML

{{getPostName(item.id)}}

Angular.js

function getPostName(id) {
    return post[id].name;
}

【问题讨论】:

  • 过滤器需要同步。您打算如何使用它?
  • 我在 DB 中获得了 PostCode 的 ID,需要获取它的值并替换 ID,例如 id = 1,然后值为 00-000
  • 你写的是服务,不是过滤器

标签: javascript angularjs filter angular-promise


【解决方案1】:

根据您的评论

我在 DB 中获得了 PostCode 的 ID,需要获取它的值并替换 ID,例如 id = 1,然后值为 00-000

您需要使用指令来调用数据库并执行 DOM 操作。

http://www.sitepoint.com/practical-guide-angularjs-directives/

指令:

angular.directive('postcode', ['$cordovaSQLite', '$q', function($cordovaSQLite, $q){
    return {
        template: '{{getPostName(item.id)}}',
        link: function(scope, elem, attrs) {
            scope.getPostName = function(PostCodeID) {
                var def = $q.defer();
                ionic.Platform.ready(function() {
                    if (window.cordova) {
                        var db = $cordovaSQLite.openDB({
                            name: "msddocapp.db"
                        });
                    } else {
                        var db = window.openDatabase("msddocapp.db", "1", "ES Database", 5 * 1024 * 1024);
                    }
                    var query = "select * from PostCode where ServerID = ?";
                    $cordovaSQLite.execute(db, query, [PostCodeID]).then(function(s) {
                        if (s.rows.length > 0) {
                            def.resolve(s.rows.item(0).Title);
                        }
                    }, function(e) {
                        console.log(e);
                        def.reject(PostCodeID);
                    })
                });
                return def.promise.then(function(s) {
                    return s;
                }, function(e) {
                    return e;
                });
            };
        }
    };
}]);

HTML:

<div data-postcode></div>

编辑:

由于此特定指令与其父级共享范围,您只需编辑模板以使用您传入的任何内容,在这种情况下为i

HTML

<tr ng-repeat="i in data.contacts">
    <td>
        <div data-postcode></div>
    </td>
</tr>

指令

template: '{{getPostName(i.id)}}'

【讨论】:

  • 你能告诉我如何使用指令作为过滤器吗?
  • 您不需要使用过滤器。看看我的编辑。
  • 以及如果我得到这个 ng-repeat 如何传递 i.PostCodeID:
    {{i.邮政编码}}
  • 不工作它返回 {{getPostName(item.id)}} 和 ReferenceError: PostCodeID is not defined
  • 我只是复制并粘贴了您的代码,以便为您提供使用它的指令示例。我编辑了我的答案以使用 scope.getPostName = function(PostCodeID) 而不是 scope.getPostName = function(id)
猜你喜欢
  • 2020-07-27
  • 2019-02-16
  • 1970-01-01
  • 2015-04-17
  • 1970-01-01
  • 1970-01-01
  • 2012-04-24
  • 2015-10-05
  • 2016-12-11
相关资源
最近更新 更多