1

私は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>
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 に答える