Question

我是AngularJS的新手。我可以成功检索JSON数据并使用$ scope（ASP.NET应用程序）在我的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>

Answer 1

通常，您应该避免使用$ rootScope来存储值。此外，它应该根据您提供的代码工作，以检查您是否有任何隔离范围，您可以尝试这样做，更改视图

来自

{{rootScopeData}}

收件人：

{{$root.rootScopeData}}

工作Sample

或者您可以将rootScope值分配给$ scope变量并直接在视图中绑定

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

<强> HTML：

 {{Data }}

AngularJS中的$ rootScope不起作用

1 个答案: