angularjs - 无法从模板文件

Question

我在AngularJS上的结构化网络应用程序等博客上工作。我试图检索用户是另一个帖子并动态检索他们的显示名称，因为它循环遍历所有帖子，但我似乎无法正确检索数据..这是我到目前为止所做的。

博客控制器：

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，但是当我尝试使用＆＃39; {{}}＆＃39;来调用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>

不太确定问题是什么..我遗失了什么？

UPDATE :: 我最近更新了我的控制器和工厂，以便更好地处理我的数据流，我的Controller现在看起来像这样：

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

我现在使用unoFunctions工厂来处理来自我的数据库的某些请求，如下所示。

uno.factory（＆＃39; unoFunctions＆＃39;，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]错误并保持我的控制台干净..我研究了错误，它似乎因为当我从unoFunctions工厂调用函数时，比如getUser或getPost。它每次返回一个新的数组或类似的东西，我猜是把东西扔出范围。我不完全确定，并且有理由这样做？

Answer 1

此绑定

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

假设getAuthor返回一个对象，但它没有，即使有正确的return语句 - 因为异步请求发生，adbFactory链显然会返回一个promise ，而不是一个对象。每次adbFactory.get绑定被监视时执行getAuthor都会导致性能不佳 - 即使使用$http缓存，也必须不断解析json结果。

适用于缓存和绑定服务结果的解决方案（以及完整模型的前身）是

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