Question

最近，我开始研究MEAN堆栈。我在html中创建了一个ng-repeat，对于每个标题，我攻击了一个ng-click函数，用于在叠加弹出窗口中显示细节。

blogApp.controller("blogPanelController",['$scope','$resource',function($scope,$resource){
    var blogs = $resource('/api/blog-list');
    var blogDetail = $resource('/api/blogs/:timestamp', {timestamp: '@ts'});
    
    blogs.query(function(results) {
        $scope.blogs = results;
    })
    
    $scope.generateFloatLayer = function(timestamp){
        
        blogDetail.get({ts: timestamp}, function(results){
            $scope.detail = results;
            console.log($scope.detail.content);
        });
        generateFloatLayer(timestamp);
        
    };
    
}]);

<!-- for overlay to display detail -->
        <div id="overlay" class="jin-overlay" onclick="removeFloatLayer()"></div>
        <div id="popup" class="jin-popup" ng-controller="blogPanelController" ng-cloak>
                <div ng-bind-html="detail.content | trusthtml">
                    <!-- Hello world blog -->
                    {{detail.content}}
                 </div>
        </div>
        
<!-- list view -->
        <div class="container jin-page-buttom-margin" ng-controller="blogPanelController" ng-cloak>
            <div class="panel panel-info jin-shadow" ng-repeat="blog in blogs">
                <div class="panel-heading">
                    <h3 class="panel-title" ng-click="generateFloatLayer(blog.timestamp)">{{blog.title}}</h3>
                </div>
                <div class="panel-body" ng-bind-html="blog.content | trusthtml">
                    <!-- html view content -->
                    {{blog.content}}
                </div>
            </div>
        </div>

现在出现问题，在我点击ng-click后，弹出窗口可以正确显示，但没有显示数据绑定。

有人有任何想法吗？

Answer 1

因为您的相关代码是异步的，所以这不起作用。在这种情况下，我将绑定包装到$timeout函数中：

blogDetail.get({ts: timestamp}, function(results){

    $timeout( function() {
        $scope.detail = results;
    } );
    console.log($scope.detail.content);
});

不要忘记将$timeout注入依赖项！

blogApp.controller("blogPanelController",['$scope','$resource','$timeout',function($scope,$resource,$timeout){ ... }

ng-click触发后，ng-bind-html未更新

1 个答案: