从模板文件内的数据库获取数据有问题

Trouble getting data from database within template file

本文关键字:数据库 获取 数据 有问题 文件      更新时间:2023-09-26

我在AngularJS中做一个像结构化web应用程序的博客。我试图检索这是一个帖子的另一个用户,并动态检索他们的显示名称,因为它通过所有的帖子循环,但我似乎无法正确检索数据。这是我到目前为止所做的。

博客控制器:

uno.controller('newsCtrl', function($scope, $http, adbFactory){
    $scope.derp = 'derp!!!!!';
    adbFactory.get($http, 'get users 1', false).success(function(data){
        $scope.user = data;
    }).error(function(){
        console.log('Errorrr');
    });
    $scope.init = function(){
        adbFactory.get($http, 'get all blog_posts', true).success(function(data){
            $scope.posts = data;
            console.log($scope.posts);
        });
    };
    $scope.getAuthor = function(_id) {
        adbFactory.get($http, 'get users id ' +_id+ ' spec', false).success(function(data){
            //$scope.author = data;
            //console.log($scope.author);
            return data;
        });
    };
});

如果我console.log的数据,它显示了用户完美给定的作者id是在数据库中,但当我试图调用getAuthor函数使用'{{}}'范围,我得到错误的拼贴…下面是我的博客模板。

博客模板:

<div class="large-12 small-12 columns" ng-init="init()">
    <div class="row">
        <div class="large-12 small-12 columns" ng-repeat="topic in posts" style="margin-bottom:20px;">
            <div id="news-post" class="panel animated fadeInUp">
                <div class="row" ng-init="getAuthor(topic.author_id)">
                    <div class="large-2 small-2 columns"> 
                        <img src="{{ topic['thumb'] }}" alt="" style="border-radius:50%; height:100px; width: 150px;" />
                    </div>
                    <div class="left large-10 small-10 columns">
                        <div class="row">
                            <h2 class="post-title"><a href="#/news/post/{{ topic['id'] }}">{{topic['title']}}</a> <p>Posted By, {{ getAuthor(topic.author_id).email }}</p></h2>
                            <p>{{ topic['body'] }}</p> 
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <hr>
    </div>
</div>

不太确定问题是什么…我错过什么了吗?

更新::我最近更新了我的控制器和工厂,以获得更好的处理数据流的范围,我的控制器现在看起来像这样:

uno.controller('newsCtrl', function($scope, $http, adbFactory, $cacheFactory, unoFunctions){
    $scope.init = function(){
        adbFactory.get($http, 'get all blog_posts', true).success(function(data){
            $scope.posts = data;
            $scope.getUser = function(_id) {
            $scope.userData = unoFunctions.getUser(_id);
                //console.log($scope.userData);
                return $scope.userData;
            };
        });
        $scope.getTags = function(_id) {
            var post = unoFunctions.getPost(_id);
            var _tags = post.tags.split(',');
            for(var i = 0; i < _tags.length; i++)
            {
                _tags[i] = _tags[i].trim();
            }
            return _tags;
        };
        $scope.getUserName = function(_id) {
            $scope.userData = unoFunctions.getUser(_id);
            return $scope.userData.display_name;
        };
        $scope.getUser = function(_id) {
            $scope.userData = unoFunctions.getUser(_id);
            //console.log($scope.userData);
            return $scope.userData;
        };
        $scope.getUserName = function(_id) {
            $scope.userData = unoFunctions.getUser(_id);
            return $scope.userData.display_name;
        };
    };
});

unfunctions工厂是我现在用来处理来自数据库的某些请求的,如下所示。

uno。factory(' unfunctions ', function(adbFactory, $http, $cacheFactory){Var fact = {};

var user = $cacheFactory('user');
var post = $cacheFactory('post');
fact.getUser = function(_id) {
    if(!user.get(_id)){
        adbFactory.get($http, 'get users id '+_id+' spec', false).success(function(data){
            user.put(_id, data);
        });
    }
    return user.get(_id);
};
fact.getPost = function(_id) {
    if(!post.get(_id))
    {
        adbFactory.get($http, 'get blog_posts id '+_id+' spec', false).success(function(data){
            post.put(_id, data);
        });
    }
    return post.get(_id);
};
fact.loggedIn = function()
{
    console.log('gfdg');
};
/*------------------------------*/
return fact;

});

我的模板输出结果是这样的:

<div class="large-12 small-12 columns" ng-init="init()">
    <div class="row">
        <div class="large-12 small-12 columns" ng-repeat="topic in posts | filter:postTitle | orderBy:'-time' " style="margin-bottom:20px;">
            <div id="news-post" class="panel animated fadeInUp" ng-init="getTags(topic.id)">
                <div class="row" style="padding-bottom:0px;">
                    <div class="large-2 small-2 columns">
                        <img src="{{ topic['thumb'] }}" alt="" style="border-radius:50%; height:120px; width: 200px;" />
                    </div>
                    <div class="left large-10 small-10 columns">
                        <div class="row" style="padding-bottom:0px;">
                            <h2 class="post-title">
                            <a href="#/news/post/{{ topic['id'] }}">
                            {{topic['title']}} 
                            </a> 
                            <p style="font-size:13px; font-style:italic; color:#a5a5a5" class="right">{{ topic.time | timeago }} {{  }}</p>
                            <p style="font-weight:bold; font-style:italic; color:#aaa">Posted By, {{ getUser(topic.author_id).display_name }}</p></h2>
                            <p>{{ topic['body'] }}</p> 
                            <div ng-repeat="tag in getTags(topic.id)"><span style="background:#ccc; margin:7px; padding:4px; border-radius:5px; font-size:12px" class="left">{{ tag }}</span></div>
                            <p class="right" style="background:#dedede; font-size:13px; padding:7px; border-radius:6px; color:#1985A1;">{{ topic.category }}</p
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这工作得很好,并返回我正在寻找的所需结果,但我希望摆脱无数的错误:[$rootScope:infdig]错误,并保持我的控制台干净。我研究了这个错误,似乎是因为当我从unfunctions工厂调用函数时,如getUser或getPost。它每次都会返回一个新的数组或者类似的东西,我猜这会把东西扔出作用域。我不完全确定,这是为什么呢?

此绑定

<p>Posted By, {{ getAuthor(topic.author_id).email }}</p>

假设getAuthor返回一个对象,但它没有,即使有适当的return语句-因为异步请求发生了,adbFactory链显然会返回一个承诺,而不是一个对象。并且每次getAuthor绑定被监视时都执行adbFactory.get将是糟糕的性能方面- json结果必须不断解析,即使有$http缓存。

缓存和绑定服务结果到范围的合适解决方案是

var authors = $cacheFactory('authors');
$scope.getAuthor = function(_id) {
    if (!authors.get(_id)) {
        authors.put(_id, {});
        adbFactory.get($http, 'get users id ' +_id+ ' spec', false).success(function(data){
            authors.put(_id, data);
        });
    }
    return authors.get(_id);
};