1

我是 AngularJS 的新手。我可以使用 $scope（ASP.NET 应用程序）成功检索 JSON 数据并将其显示在我的 html 页面上。但是，我试图将数据存储在 $rootScope 中，以便我可以在另一个控制器中访问它，但它不起作用。我认为我犯了一个明显的错误，非常感谢社区的反馈。谢谢！

myAngularScript.js

/// <reference path="angular.min.js" />

var myApp = angular
                .module("myModule", [])
                .controller("myController", function ($scope, $rootScope, $http) {
                    $scope.clickFunction = function () {

            //Collect data for nvd3 graph 
            var start = $scope.startDate;
            var end = $scope.endDate;

            if (start == null && end == null) {
                alert("Please enter valid start and end dates");
                return;
            };

            if (start == null) {
                alert("Please enter a valid start date");
                return;
            };

            if (end == null) {
                alert("Please enter a valid end date");
                return;
            };

            if (start > end) {
                alert("The start date is greater than the end date");
                $scope.startDate = "";
                $scope.endDate = "";
                return;
            };

            $http.get("dataWebService.asmx/getTotalForDateInterval", 
            {
                params: { startDate: start, endDate: end }
            }).then(function (response) {
                $rootScope.rootScopeData = response.data;

                });


        };
    });

我的网络表格：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="vetApp.WebForm4" %>

<!DOCTYPE html>

<%-- The "data-ng-app" tells AngularJS to manage the DOM html element and its children using "myModule" module--%>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="myModule">
<head runat="server">
    <title>vetApp</title>
    <link href="css/myStyleSheet.css" rel="stylesheet" type="text/css"  />
    <script src="scripts/jquery-1.9.1.min.js"></script>
    <script src="scripts/bootstrap.min.js"></script>
    <link href="Content/bootstrap.min.css" rel="stylesheet"/>
    <script src="scripts/Pikaday/moment.js" type="text/javascript"  ></script>
    <script src="scripts/Pikaday/pikaday.js" type="text/javascript"></script>
    <link href="css/pikaday.css" rel="stylesheet" />
    <script src="scripts/myScripts.js"></script>
    <script src="scripts/angular.min.js"></script>
    <script src="scripts/d3.min.js"></script>
    <script src="scripts/nv.d3.min.js"></script>
    <script src="scripts/myAngularScript.js"></script>

</head>

<body onload="loadPikaday()" data-ng-controller="myController">
    <form id="form1" runat="server">

       <%-- Creating the header --%>
       <div class="row">&emsp;Report from:&emsp;
           <input id="startDate" size="6" type="text" data-ng-model="startDate" /> 
           &emsp; To &emsp; 
           <input id="endDate" size="6" type="text" data-ng-model="endDate" />
           &emsp; 
          <input type="button" value="Go!" data-ng-click="clickFunction()" />
        </div>

       {{rootScopeData}}

      </form>
</body>
</html>
4

1 回答 1

0

Generally, you should avoid using $rootScope to store values. Also, it should work according to the code you have provided, in order to check if you have any isolate scope you could try this, Change the view

From 

{{rootScopeData}}

To: 

{{$root.rootScopeData}}

Working Sample

Or you can assign the rootScope value to a $scope variable and bind in the view directly

 $rootScope.rootScopeData = response.data;
 $scope.Data = $rootScope.rootScopeData;

HTML:

 {{Data }}
于 2016-08-09T17:33:27.583 回答