1

I am new to AngularJS. I can successfully retrieve JSON data and display it on my html page with $scope (ASP.NET application). However, I am trying to store the data in $rootScope, so that I can access it in another controller, but it's not working. I think that I am making an obvious mistake and would greatly appreciate the community's feedback. Thank you!

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;

                });


        };
    });

My webform:

<%@ 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>
Johnathan
  • 1,877
  • 4
  • 23
  • 29
  • How do you know it is not working? To share data across controllers, there are two alternatives - service (similar to $rootScope, but limited sharing) or events (emit / broadcast / on) – vijayst Aug 09 '16 at 17:33
  • @Vijay Hi! Thank you for your answer. I think that it's not working because the data is not being posted on the html page like with scope. Could you please elaborate more or refer me to some more info about the second alternative? Is it part of AngularJS? – Johnathan Aug 09 '16 at 18:02
  • Anything in the console? .catch() might help you, if the http request failed. Google "Sharing data between angular controllers". There are several articles related to the topic. – vijayst Aug 09 '16 at 18:16

1 Answers1

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 }}
Sajeetharan
  • 216,225
  • 63
  • 350
  • 396