Javascript AngularJS-第一次单击时，数据未填充到html页面中_Javascript_Jquery_Html_Angularjs_Web Applications

Javascript AngularJS-第一次单击时，数据未填充到html页面中

javascript jquery html angularjs web-applications

Javascript AngularJS-第一次单击时，数据未填充到html页面中,javascript,jquery,html,angularjs,web-applications,Javascript,Jquery,Html,Angularjs,Web Applications,我正在用angularjs做一个测试项目，但第一次点击时数据并没有填充到html页面中。以下是我的文件夹结构： WebContent --css ----indexc.css ----w3.css --js ----script.js --pages ----home.html ----yourstory.html ----story.html --index.html My index.html是- <!DOCTYPE html> <html ng-app="publicS

我正在用angularjs做一个测试项目，但第一次点击时数据并没有填充到html页面中。以下是我的文件夹结构：

WebContent
--css
----indexc.css
----w3.css
--js
----script.js
--pages
----home.html
----yourstory.html
----story.html
--index.html

My index.html是-

<!DOCTYPE html>
<html ng-app="publicStory">
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" href="css/w3.css">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="js/script.js"></script>
</head>

<body ng-controller="homeController">

<!-- Menu Start -->
    <div class="container">
        <ul class="nav nav-justified" set-class-when-at-top="fix-to-top">
            <li><a class="active" href="#" ng-click="getHomeData()">Home</a></li>
            <li><a href="#yourstory" ng-click="getYourStories()">YOUR STORY</a></li>
        </ul>

    </div>
    <!-- Menu End -->
      <div id="main" class="w3-container">

    <!-- angular templating -->
        <!-- this is where content will be injected -->
    <div ng-view></div>

  </div>    
</body>
</html>

var storyApp = angular.module('publicStory', ['ngRoute']);

storyApp.config(function ($routeProvider,$locationProvider) {
    $locationProvider.hashPrefix('');
    $routeProvider
        // route for the home page
        .when('/', {
            templateUrl : 'pages/Home.html',
            controller  : 'homeController'
        })
        // route for the your story page
        .when('/yourstory', {
            templateUrl : 'pages/yourstory.html',
            controller  : 'homeController'
        })
        // route for the Sign UP page
        .when('/story', {
            templateUrl : 'pages/story.html',
            controller  : 'homeController'
        }); 
});

storyApp.service('storyService', function() {
        console.log("2");
          var story;

          var addStory = function(newObj) {
              console.log("3");
              console.log("adding story to service", newObj);
              story = newObj;
          };

          var getStory = function(){
              console.log("4");
              console.log("getting story from service", story);
              return story;
          };

          return {
              addStory: addStory,
              getStory: getStory
          };

        });

    storyApp.controller('storyController', function($scope, storyService) { 
        console.log("5");
        console.log('In storyController');
        $scope.yourStoryById = storyService.getStory();
        console.log('Story in storyController', $scope.yourStoryById);
    });

    // create the controller and inject Angular's $scope
    storyApp.controller('homeController', function($scope, $http, $location, storyService) {
        console.log("6");
        console.log('home Controller');
        $scope.yourStory = {};
        $scope.yourStoryById = storyService.getStory();
        console.log('Story in homeController', $scope.yourStoryById);

        $scope.getHomeData = function() {
            console.log("In getHomeData");
            $http({
                method : 'POST',
                url : 'homeData',
                data : angular.toJson($scope.userform),
                headers : {
                    'Content-Type' : 'application/json'
                }
            }).then(function(response) {
                alert("Got response for getHomeData");
                console.log(response.data);
                $scope.eyb = response.data;
            });
        };

        $scope.getYourStories = function() {
            console.log("7");
            console.log('In getYourStories');
            $scope.yourStory.action = 'fetchAllStory';
            $scope.yourStory.id = -1;
            console.log($scope.yourStory);
            $http({
                method : 'POST',
                url : 'yourStory',
                data : angular.toJson($scope.yourStory),
                headers : {
                    'Content-Type' : 'application/json'
                }
            }).then(function(response) {
                //alert("Got response for getYourStories");
                console.log(response.data);
                $scope.yourStories = response.data;
                $scope.flag = false;
            });
        };

        $scope.getYourStoryById = function(Id) {
            console.log("8");
            console.log('In getYourStoryById');
            $scope.yourStory.id = Id;
            $scope.yourStory.action = 'getStoryById';
            console.log($scope.yourStory);
            $http({
                method : 'POST',
                url : 'yourStory',
                data : angular.toJson($scope.yourStory),
                headers : {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            }).then(function(response) {
                console.log("9");
                console.log("response in getYourStoryById", response.data);
                $scope.yourStoryById = response.data;
                storyService.addStory(response.data);
                $location.path('/story');
                console.log("10");
            });
        };
    });

<div class="w3-container">    
    <div class="storyList" ng-hide="flag">    
        <div id="side-nav">
            <img src="images/yourStory.jpg" alt="Trolltunga Norway" width="300">
        </div>

        <div id="content-wrapper">   
            <button class="w3-btn w3-blue"  ng-hide="flag" ng-click="flag = true">Write Your Story</button>

            <table>
                <tr ng-repeat="yourStory in yourStories">
                    <!-- <td>{{ yourStory.id }}</td>  -->
                    <td>{{ yourStory.writerName }}  
                        </p>
                        <a href="#story" ng-click="getYourStoryById(yourStory.id)">{{ yourStory.storyTitle }}</a></td>
                    <!--  <td>{{ yourStory.writerEmail }}</td> 
                    <td>{{ yourStory.storyTitle }}</td> -->
                </tr>
            </table>    
        </div>
    </div>
</div>

<div class="w3-container">
    <h1>Hello Story Page</h1>
    <table>
        <tr>
                <td>{{ yourStoryById.writerName }}</td> 
                </p>
                <td>{{ yourStoryById.writerEmail }}</td> 
                </p>
                <td>{{ yourStoryById.storyTitle }}</td>
                </p>
                <td>{{ yourStoryById.story }}</td>
        </tr>
    </table>
</div>

我的yourstory.html是-

<!DOCTYPE html>
<html ng-app="publicStory">
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" href="css/w3.css">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="js/script.js"></script>
</head>

<body ng-controller="homeController">

<!-- Menu Start -->
    <div class="container">
        <ul class="nav nav-justified" set-class-when-at-top="fix-to-top">
            <li><a class="active" href="#" ng-click="getHomeData()">Home</a></li>
            <li><a href="#yourstory" ng-click="getYourStories()">YOUR STORY</a></li>
        </ul>

    </div>
    <!-- Menu End -->
      <div id="main" class="w3-container">

    <!-- angular templating -->
        <!-- this is where content will be injected -->
    <div ng-view></div>

  </div>    
</body>
</html>

var storyApp = angular.module('publicStory', ['ngRoute']);

storyApp.config(function ($routeProvider,$locationProvider) {
    $locationProvider.hashPrefix('');
    $routeProvider
        // route for the home page
        .when('/', {
            templateUrl : 'pages/Home.html',
            controller  : 'homeController'
        })
        // route for the your story page
        .when('/yourstory', {
            templateUrl : 'pages/yourstory.html',
            controller  : 'homeController'
        })
        // route for the Sign UP page
        .when('/story', {
            templateUrl : 'pages/story.html',
            controller  : 'homeController'
        }); 
});

storyApp.service('storyService', function() {
        console.log("2");
          var story;

          var addStory = function(newObj) {
              console.log("3");
              console.log("adding story to service", newObj);
              story = newObj;
          };

          var getStory = function(){
              console.log("4");
              console.log("getting story from service", story);
              return story;
          };

          return {
              addStory: addStory,
              getStory: getStory
          };

        });

    storyApp.controller('storyController', function($scope, storyService) { 
        console.log("5");
        console.log('In storyController');
        $scope.yourStoryById = storyService.getStory();
        console.log('Story in storyController', $scope.yourStoryById);
    });

    // create the controller and inject Angular's $scope
    storyApp.controller('homeController', function($scope, $http, $location, storyService) {
        console.log("6");
        console.log('home Controller');
        $scope.yourStory = {};
        $scope.yourStoryById = storyService.getStory();
        console.log('Story in homeController', $scope.yourStoryById);

        $scope.getHomeData = function() {
            console.log("In getHomeData");
            $http({
                method : 'POST',
                url : 'homeData',
                data : angular.toJson($scope.userform),
                headers : {
                    'Content-Type' : 'application/json'
                }
            }).then(function(response) {
                alert("Got response for getHomeData");
                console.log(response.data);
                $scope.eyb = response.data;
            });
        };

        $scope.getYourStories = function() {
            console.log("7");
            console.log('In getYourStories');
            $scope.yourStory.action = 'fetchAllStory';
            $scope.yourStory.id = -1;
            console.log($scope.yourStory);
            $http({
                method : 'POST',
                url : 'yourStory',
                data : angular.toJson($scope.yourStory),
                headers : {
                    'Content-Type' : 'application/json'
                }
            }).then(function(response) {
                //alert("Got response for getYourStories");
                console.log(response.data);
                $scope.yourStories = response.data;
                $scope.flag = false;
            });
        };

        $scope.getYourStoryById = function(Id) {
            console.log("8");
            console.log('In getYourStoryById');
            $scope.yourStory.id = Id;
            $scope.yourStory.action = 'getStoryById';
            console.log($scope.yourStory);
            $http({
                method : 'POST',
                url : 'yourStory',
                data : angular.toJson($scope.yourStory),
                headers : {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            }).then(function(response) {
                console.log("9");
                console.log("response in getYourStoryById", response.data);
                $scope.yourStoryById = response.data;
                storyService.addStory(response.data);
                $location.path('/story');
                console.log("10");
            });
        };
    });

<div class="w3-container">    
    <div class="storyList" ng-hide="flag">    
        <div id="side-nav">
            <img src="images/yourStory.jpg" alt="Trolltunga Norway" width="300">
        </div>

        <div id="content-wrapper">   
            <button class="w3-btn w3-blue"  ng-hide="flag" ng-click="flag = true">Write Your Story</button>

            <table>
                <tr ng-repeat="yourStory in yourStories">
                    <!-- <td>{{ yourStory.id }}</td>  -->
                    <td>{{ yourStory.writerName }}  
                        </p>
                        <a href="#story" ng-click="getYourStoryById(yourStory.id)">{{ yourStory.storyTitle }}</a></td>
                    <!--  <td>{{ yourStory.writerEmail }}</td> 
                    <td>{{ yourStory.storyTitle }}</td> -->
                </tr>
            </table>    
        </div>
    </div>
</div>

<div class="w3-container">
    <h1>Hello Story Page</h1>
    <table>
        <tr>
                <td>{{ yourStoryById.writerName }}</td> 
                </p>
                <td>{{ yourStoryById.writerEmail }}</td> 
                </p>
                <td>{{ yourStoryById.storyTitle }}</td>
                </p>
                <td>{{ yourStoryById.story }}</td>
        </tr>
    </table>
</div>


写你的故事
{{yourStory.writerName}

而story.html是-

<!DOCTYPE html>
<html ng-app="publicStory">
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" href="css/w3.css">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="js/script.js"></script>
</head>

<body ng-controller="homeController">

<!-- Menu Start -->
    <div class="container">
        <ul class="nav nav-justified" set-class-when-at-top="fix-to-top">
            <li><a class="active" href="#" ng-click="getHomeData()">Home</a></li>
            <li><a href="#yourstory" ng-click="getYourStories()">YOUR STORY</a></li>
        </ul>

    </div>
    <!-- Menu End -->
      <div id="main" class="w3-container">

    <!-- angular templating -->
        <!-- this is where content will be injected -->
    <div ng-view></div>

  </div>    
</body>
</html>

var storyApp = angular.module('publicStory', ['ngRoute']);

storyApp.config(function ($routeProvider,$locationProvider) {
    $locationProvider.hashPrefix('');
    $routeProvider
        // route for the home page
        .when('/', {
            templateUrl : 'pages/Home.html',
            controller  : 'homeController'
        })
        // route for the your story page
        .when('/yourstory', {
            templateUrl : 'pages/yourstory.html',
            controller  : 'homeController'
        })
        // route for the Sign UP page
        .when('/story', {
            templateUrl : 'pages/story.html',
            controller  : 'homeController'
        }); 
});

storyApp.service('storyService', function() {
        console.log("2");
          var story;

          var addStory = function(newObj) {
              console.log("3");
              console.log("adding story to service", newObj);
              story = newObj;
          };

          var getStory = function(){
              console.log("4");
              console.log("getting story from service", story);
              return story;
          };

          return {
              addStory: addStory,
              getStory: getStory
          };

        });

    storyApp.controller('storyController', function($scope, storyService) { 
        console.log("5");
        console.log('In storyController');
        $scope.yourStoryById = storyService.getStory();
        console.log('Story in storyController', $scope.yourStoryById);
    });

    // create the controller and inject Angular's $scope
    storyApp.controller('homeController', function($scope, $http, $location, storyService) {
        console.log("6");
        console.log('home Controller');
        $scope.yourStory = {};
        $scope.yourStoryById = storyService.getStory();
        console.log('Story in homeController', $scope.yourStoryById);

        $scope.getHomeData = function() {
            console.log("In getHomeData");
            $http({
                method : 'POST',
                url : 'homeData',
                data : angular.toJson($scope.userform),
                headers : {
                    'Content-Type' : 'application/json'
                }
            }).then(function(response) {
                alert("Got response for getHomeData");
                console.log(response.data);
                $scope.eyb = response.data;
            });
        };

        $scope.getYourStories = function() {
            console.log("7");
            console.log('In getYourStories');
            $scope.yourStory.action = 'fetchAllStory';
            $scope.yourStory.id = -1;
            console.log($scope.yourStory);
            $http({
                method : 'POST',
                url : 'yourStory',
                data : angular.toJson($scope.yourStory),
                headers : {
                    'Content-Type' : 'application/json'
                }
            }).then(function(response) {
                //alert("Got response for getYourStories");
                console.log(response.data);
                $scope.yourStories = response.data;
                $scope.flag = false;
            });
        };

        $scope.getYourStoryById = function(Id) {
            console.log("8");
            console.log('In getYourStoryById');
            $scope.yourStory.id = Id;
            $scope.yourStory.action = 'getStoryById';
            console.log($scope.yourStory);
            $http({
                method : 'POST',
                url : 'yourStory',
                data : angular.toJson($scope.yourStory),
                headers : {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            }).then(function(response) {
                console.log("9");
                console.log("response in getYourStoryById", response.data);
                $scope.yourStoryById = response.data;
                storyService.addStory(response.data);
                $location.path('/story');
                console.log("10");
            });
        };
    });

<div class="w3-container">    
    <div class="storyList" ng-hide="flag">    
        <div id="side-nav">
            <img src="images/yourStory.jpg" alt="Trolltunga Norway" width="300">
        </div>

        <div id="content-wrapper">   
            <button class="w3-btn w3-blue"  ng-hide="flag" ng-click="flag = true">Write Your Story</button>

            <table>
                <tr ng-repeat="yourStory in yourStories">
                    <!-- <td>{{ yourStory.id }}</td>  -->
                    <td>{{ yourStory.writerName }}  
                        </p>
                        <a href="#story" ng-click="getYourStoryById(yourStory.id)">{{ yourStory.storyTitle }}</a></td>
                    <!--  <td>{{ yourStory.writerEmail }}</td> 
                    <td>{{ yourStory.storyTitle }}</td> -->
                </tr>
            </table>    
        </div>
    </div>
</div>

<div class="w3-container">
    <h1>Hello Story Page</h1>
    <table>
        <tr>
                <td>{{ yourStoryById.writerName }}</td> 
                </p>
                <td>{{ yourStoryById.writerEmail }}</td> 
                </p>
                <td>{{ yourStoryById.storyTitle }}</td>
                </p>
                <td>{{ yourStoryById.story }}</td>
        </tr>
    </table>
</div>


你好故事页面
{{yourStoryById.writerName}

{{yourStoryById.writerEmail}

{{yourStoryById.storyTitle}

{{yourStoryById.story}

当用户单击yourstory.html页面中的#story链接时，它将调用getYourStoryById（）函数并从后端获取数据

我的问题是，当用户第一次单击story.html页面中的#story链接时，数据不会填充到story.html中，但在第二次单击后，数据会填充到story.html页面中。我想，要从getYourStoryById（）调用“storyController”，我使用的是$location.path（'/story'），但它没有像我预期的那样工作

试试看

$scope.$apply(function(){
    $scope.yourStoryById = response.data
    ...
});

如果我们在$scope.$apply（）中包装该回合的代码，则会注意到更改，并更新页面。

从您的

锚定标记中删除href=“#story”
，因为数据是异步来的（通过http.post
），导航应该在数据加载后进行。您已经在script.js
文件（$location.path（'/story'）；
中执行了该操作
因此，将代码更改为：
<a ng-click="getYourStoryById(yourStory.id)">{{ yourStory.storyTitle }}</a></td>

{{yourStory.storytile}
Hi@Sibi..感谢您的回复。您能告诉我在哪里以及如何合并此代码吗？嗨@anoop，谢谢您的回复。你的建议奏效了，但我在这个解决方案中面临一个问题。我想将{{yourStory.storyTitle}}作为链接，但是删除href会使{{yourStory.storyTitle}}成为html页面中的普通文本。是的，ng click=“getYourStoryById（yourStory.id）”也在处理此文本。@Abhishek:这可以通过css
处理，比如style=“cursor:pointer”
，希望能有所帮助。