Question

我正在学习Angular，所以我可以进入Web应用程序开发。我正在做一个测试项目，但angularjs表达式不起作用：这是我的文件夹结构：

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

<title>Dil Ki Bhadas</title>

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

// create the module and name it scotchApp
var storyApp = angular.module('publicStory', ['ngRoute']);

// configure our routes
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'
        }); 
});


// create the controller and inject Angular's $scope
storyApp.controller('homeController', function($scope, $http, $location) {
    console.log('home Controller');
    $scope.yourStory = {};
    /*
     * Get Home Data
     */
    $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;
        });
    };

    /*
     * Get Your Story
     */

    $scope.getYourStories = function() {
        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('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) {
            alert("Got response for getYourStoryById");
            console.log(response.data);
            $scope.yourStoryById = response.data;
            console.log($scope.yourStoryById);
            $location.path('/story');
        });
    };

});

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

当用户点击#story页面中的yourstory.html链接时，它会调用getYourStoryById()函数并从后端获取数据。我可以在此方法中从后端获取数据，并能够在$scope.yourStoryById = response.data;中设置此数据。

我的问题是当控制进入story.html（$ location.path（'/ story'））时，我只能看到“Hello Story Page”而不是$ scope.yourStoryById中的其他数据。< / p>

Answer 1

这可能是因为当您切换路线时，angular会创建homeController的新实例，因此您在一个页面上可以访问的范围与您拥有的范围不同访问其他页面。

要共享数据，您已在一个控制器实例中检索到所有控制器，您可以使用服务。由于服务是单例，因此每次注入时它们将始终返回相同的实例。

在那里使用服务有很多资源，因此AngularJS教育的下一个自然步骤是查找服务的工作方式。： - ）

为了帮助您入门，以下是您可能创建的服务示例：

angular.module('publicStory').service('myStoryService', myStoryService);

function myStoryService($http){
    // Public functions
    this.getYourStoryById = getYourStoryById;

    // Implementation
    function getYourStoryById (yourStory) {
        return $http({
            method : 'POST',
            url : 'yourStory',
            data : angular.toJson(yourStory),
            headers : {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        }).then(function(response) {
            alert("Got response for getYourStoryById");
            console.log(response.data);
            return response.data;
        });
    }
}

AngularJS表达式不起作用

1 个答案: