带有承诺的角度自定义过滤器

问题描述

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

.filter('邮政编码', ['$cordovaSQLite', '$q',函数($cordovaSQLite，$q){返回函数(邮政编码){函数 ret() {var def = $q.defer();ionic.Platform.ready(function() {如果(window.cordova){var db = $cordovaSQLite.openDB({名称:msddocapp.db"});} 别的 {var db = window.openDatabase("msddocapp.db", "1", "ES 数据库", 5 * 1024 * 1024);}var query = "select * from PostCode where ServerID = ?";$cordovaSQLite.execute(db, query, [PostCodeID]).then(function(s) {如果(s.rows.length > 0){def.resolve(s.rows.item(0).Title);}}, 函数(e) {控制台日志(e)；def.reject(PostCodeID);})});返回 def.promise;}返回 ret().then(function(s) {返回 s;}, 函数(e) {返回 e;});}}]);

这个过滤器只用于一个ng-repeat，所以也许我可以像这样绑定一个函数到ng-repeat:

HTML

{{getPostName(item.id)}}

Angular.js

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

解决方案

根据您的评论

我在 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){返回 {模板:'{{getPostName(item.id)}}',链接:功能(范围，元素，属性){scope.getPostName = 函数(PostCodeID){var def = $q.defer();ionic.Platform.ready(function() {如果(window.cordova){var db = $cordovaSQLite.openDB({名称:msddocapp.db"});} 别的 {var db = window.openDatabase("msddocapp.db", "1", "ES 数据库", 5 * 1024 * 1024);}var query = "select * from PostCode where ServerID = ?";$cordovaSQLite.execute(db, query, [PostCodeID]).then(function(s) {如果(s.rows.length > 0){def.resolve(s.rows.item(0).Title);}}, 函数(e) {控制台日志(e)；def.reject(PostCodeID);})});返回 def.promise.then(function(s) {返回 s;}, 函数(e) {返回 e;});};}};}]);

HTML:

由于此特定指令与其父级共享作用域，因此您只需编辑模板以使用您传入的任何内容，在本例中为 i:

HTML

<td><div 数据邮政编码></div></td></tr>

指令

模板:'{{getPostName(i.id)}}'

What I am trying to achieve is using a filter that will return success or error from the ret() function. With the code below it returns {}, which is probably its promise.

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

This filter is used for only one ng-repeat, so maybe I can bind a function to ng-repeat like:

HTML

{{getPostName(item.id)}}

Angular.js

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

解决方案

Based on your comment

You need to use a directive in order to make the call to the database and perform the DOM manipulation.

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

Directive:

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>

EDIT:

Since this particular directive is sharing the scope with its parent you just need to edit the template to use whatever you are passing in, i in this case:

HTML

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

Directive

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

这篇关于带有承诺的角度自定义过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！