AngularJS 表达式不起作用

Question

I am learning Angular so I can get into web app development.我正在学习 Angular，所以我可以进入 Web 应用程序开发。 I'm doing a test project but angularjs expression is not working: Here is my folder structure:我正在做一个测试项目，但 angularjs 表达式不起作用：这是我的文件夹结构：

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

My index.html is -我的 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>

My script.js is -我的 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');
        });
    };

});

My yourstory.html is -我的 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>

and story.html is -和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>

When user click on #story link in yourstory.html page, it calls getYourStoryById() function and get data from backend.当用户点击#story链路yourstory.html页，它调用getYourStoryById()函数，并从后端获取数据。 I am able to get data from backend in this method and able to set this data in $scope.yourStoryById = response.data;我能够在这种方法中从后端获取数据，并能够在$scope.yourStoryById = response.data;设置这些数据$scope.yourStoryById = response.data; . .

My problem is when control is going to story.html ($location.path('/story')), I am able to see only "Hello Story Page" not other data from $scope.yourStoryById.我的问题是当控件转到story.html ($location.path('/story')) 时，我只能看到“Hello Story Page”而不是 $scope.yourStoryById 中的其他数据。

Answer 1

That is probably because when you switch route, angular creates a new instance of your homeController , so the scope you have access to on one page, is not the same scope you have access to on other pages.这可能是因为当您切换路由时，angular 会创建一个homeController的新实例，因此您在一个页面上可以访问的范围与您在其他页面上可以访问的范围不同。

To share the data, you have retrieved in one instance of a controller, with all your controllers, you can use a service.要共享数据，您已在控制器的一个实例中检索到所有控制器，您可以使用一项服务。 Since services are singletons they will always return the same instance every time it is injected.由于服务是单例，因此每次注入时它们将始终返回相同的实例。

There are a lot of resources on using services out there, so the next natural step in your AngularJS education, is looking up how services work.有很多关于使用服务的资源，所以你的 AngularJS 教育的下一个自然步骤是了解服务是如何工作的。 :-) :-)

To get you started, here's an example of a service you might create:为了让您开始，以下是您可能创建的服务示例：

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 个解决方案

解决方案1
1 已采纳 2017-07-11 14:35:40

AngularJS 表达式不起作用

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-07-11 14:35:40

解决方案1
1 已采纳 2017-07-11 14:35:40