Question

我创建了一个与新闻api服务器通信并生成新闻的应用程序。一切顺利，但它不会更新index.html中的内容。

我在谈论选项卡号。仅限2（bloomberg标签）

代码：

的index.html

<html>
    <head>
        <link rel = "stylesheet" type = "text/css" href = "bower_components/bootstrap/dist/css/bootstrap.min.css">
        <link rel = "stylesheet" type = "text/css" href = "bower_components/bootstrap/dist/css/bootstrap-theme.min.css">

        <style>
            .row-content {
                min-height:200px;
                padding-top:40px;
                padding-bottom:40px;
            }

            .navbar{
                background:blue;
            }

            .navbar .container #mynav .nav a {
                color: navajowhite;
            }
            .navbar .container #mynav .nav a:hover {
                background:darkblue;
                color:white;
            }
            .navbar .container .navbar-header .navbar-brand{
                color:navajowhite;
            }
            .navbar .container .navbar-header .navbar-brand:hover{
                color:white;
                background:darkblue;
            }
            .active{
                color:white;
                background:darkblue;
            }

        </style>

    </head>

    <body ng-app = "mainApp">
        <nav class = "navbar navbar-inverse" ng-controller = "newsController">
            <div class = 'container'>
                <div class = "navbar-header">
                    <button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = "#mynav">
                        <span class = "icon-bar"></span>
                        <span class = "icon-bar"></span>
                        <span class = "icon-bar"></span>
                        <span class = "icon-bar"></span>
                    </button>
                    <a class = "navbar-brand" href = "#">Latest News</a>
                </div>
                <div id = "mynav">
                    <ul class = "nav navbar-nav">
                        <li><a ng-class = "{'active':active == 0}"
                               ng-click = "activeChecker(0); change('bbc-news');">BBC news</a></li>
                        <li><a ng-click = "main('bloomberg',1);"
                               ng-class = "{'active':active == 1}">Bloomberg</a></li>
                        <li><a ng-class = "{'active':active == 2}"
                                ng-click = "activeChecker(2); change('cnbc');">CNBC</a></li>
                        <li><a  ng-class = "{'active':active == 3}"
                                ng-click = "activeChecker(3); change('fortune');">Fortune</a></li>
                        <li><a ng-class = "{'active':active == 4}"
                                ng-click = "activeChecker(4); change('google-news');">Google</a></li>
                        <li><a ng-class = "{'active':active == 5}"
                                ng-click = "activeChecker(5); change('mashable');">Mashable</a></li>
                        <li><a ng-class = "{'active':active == 6}"
                                ng-click = "activeChecker(6); change('recode');">ReCode</a></li>
                        <li><a ng-class = "{'active':active == 7}"
                                ng-click = "activeChecker(7); change('the-verge');">The Verge</a></li>
                    </ul>
                </div>
            </div>
        </nav>

        <div class = "container" ng-controller = "newsController">
            <div class = "row">
                <ul class = "media-list">
                    <li class = "media" ng-repeat = "x in result.articles">
                        <div class = "media-body">
                            <h2 class = "media-title">{{x.title}}</h2>
                            <p>x.description</p>
                            <footer>
                                <p>By --{{x.author}} on {{x.publishedAt | date}}</p>
                            </footer>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <script src = "bower_components/jquery/dist/jquery.min.js"></script>
        <script src = "bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
        <script src = "bower_components/angular/angular.min.js"></script>
        <script src = "scripts/app.js"></script>
        <script src = "scripts/services.js"></script>
        <script src = "scripts/controllers.js"></script>
    </body>
</html>

Controllers.js

app.controller('newsController',['$http','newsService','$scope',function($http,newsService,$scope){
    $scope.news = 'bbc-news';
    $scope.message = "Loading ...";
    $scope.change = function(index){
        $scope.news = index;
        console.log($scope.news);
    }
    $scope.active = 0;
    $scope.result = {};
    $scope.run = function (){
        newsService.getNews($scope.news)
            .then(function(response){
                $scope.result = response.data;
                console.log('Success');
            },
                 function(response){
                $scope.result = {};
                $scope.message = "Error : " + response.status + "\n" + response.statusText;
                console.log('Error')
            });

    }
    $scope.run();
    $scope.activeChecker = function(index){
        $scope.active = index;
    }

    $scope.main = function(index,index1){
        $scope.change(index);
        $scope.activeChecker(index1);
        $scope.run();
    }
}])

Services.js

app.service('newsService',['$http',function($http){
    this.getNews = function(index){
        return $http.get(' https://newsapi.org/v1/articles?source=' + index + '&sortBy=top&apiKey=485dfa3cd11b455aba4748da6d6f2e77')
    }
}]);

从服务器检索数据后，字段不在index.html中更新

0 个答案: