个人中心
gpt4 book ai didi

javascript - AngularJS - 第一次单击时数据未填充在 html 页面中

转载 作者：太空宇宙 更新时间：2023-11-04 15:28:08 25 4
gpt4 key购买 nike

我正在 angularjs 中做一个测试项目，但第一次单击时数据没有填充到 html 页面之一中。这是我的文件夹结构:

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

我的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>

我的 script.js 是 -

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

我的 yourstory.html 是 -

<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>

story.html 是 -

<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页面中的#story链接时，它会调用getYourStoryById()函数并从后端获取数据。

我的问题是，当用户第一次单击 yourstory.html 页面中的 #story 链接时，数据不会填充到 Story.html 中，但第二次单击时，后续数据会填充到 Story.html 页面中 。我认为，要从 getYourStoryById() 调用 "storyController"，我正在使用 $location.path('/story') 但它没有按我的预期工作。

最佳答案

从 anchor 标记中删除href="#story"，因为数据是异步传入的(通过http.post)并且应该进行导航数据加载后。您已经在 script.js 文件中执行了此操作 ($location.path('/story');)

因此将代码更改为:

<a ng-click="getYourStoryById(yourStory.id)">{{ yourStory.storyTitle }}</a></td>

关于javascript - AngularJS - 第一次单击时数据未填充在 html 页面中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45050198/

25 4 0
文章推荐： c++ - 在cpp中使用unix系统调用
文章推荐： c++ - 从 char 字符串中提取 2 个数字？
文章推荐： HTML、CSS - 样式列表 - 最佳实践
文章推荐： c++ - 多重定义
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com