如何在 AngularJS 页面中嵌套两个控制器？

Question

我有一个现有的 Web 窗体 ASP.NET 网站。我想在调用我的 RESTful Web API 的网站上放置一个 AngularJS 页面。该页面有一个在页面加载时加载的证券选择列表。我按下一个按钮，调用另一个 RESTful 查询来显示所选证券的报价。当我直接在浏览器中调用 Web API 调用时，它们会起作用。 AngularJS 代码在到达“angularApp.controller('QuotesCtrl', function ($scope, $http)”行时失败。我认为这与应用程序/控制器/模块的嵌套方式有关。这是我第一次尝试 AngularJS，我想我已经很接近了，但我对此还不太了解。可能有一种简单的方法可以做到这一点。你能在下面的代码中看到错误吗？

<%@ Page Language="C#" MasterPageFile="~/Template.master" AutoEventWireup="true" CodeFile="WebAPI.aspx.cs" Inherits="WebAPIDemo" ValidateRequest="false" %>

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
    <script>
        var angularApp = angular.module('myApp', []);
        LoadSecurities();

        function GetQuotes()
        {
            var id = $('#SecurityID').val();
            id = id.replace("number:", "").trim();
            var url= "http://stevegaines.info/api/Data/GetQuotes?id=" + id + "&count=10&extra=1";

            angularApp.controller('QuotesCtrl', function ($scope, $http)
            {
                $http.get(url).
                    success(function (data)
                    {
                        $scope.Quotes = data;
                    });
            });

            return false;
        }
        function LoadSecurities()
        {
            angularApp.controller('SecuritiesCtrl', function ($scope, $http)
            {
                var url= "http://stevegaines.info/api/Data/GetSecurities?id=0&securityType=CASH";
                $http.get(url).
                    success(function (data)
                    {
                        $scope.Securities = data;
                    });
            });
            return false;
        }
    </script>
    <div ng-app="myApp">
        <div ng-controller="SecuritiesCtrl">
            <select ID="SecurityID" ng-model="SecuritiesModel" ng-options="x.SecurityID as x.TrueSymbol for x in Securities | filter:'USD'"/>
            <button onclick="return GetQuotes();">Get Quotes</button><br />
            <div id="Message"></div><hr />
        </div>

         <div ng-controller="QuotesCtrl">
         <table id="QuotesTable">
              <tr>
                <th>Time</th>
                <th>Open</th>
                <th>Hi</th>
                <th>Lo</th>
                <th>Close</th>
              </tr>
              <tr ng-repeat="x in Quotes">
                <td>{{ x.QuoteTime }}</td>
                <td>{{ x.Open }}</td>
                <td>{{ x.Hi }}</td>
                <td>{{ x.Lo }}</td>
                <td>{{ x.Close }}</td>
              </tr>
            </table>
        </div>
    </div>
</asp:Content>

Answer 1

您收到该错误，因为 QuotesCtrl 不可用。不要将控制器包装在函数中，然后尝试在函数调用中进行初始化。

你应该去http://www.learn-angular.org/。从您下面的代码来看，我认为您还差得远。那里还有很多非角度的做事方式，你依赖于一些 jquery。如果您必须以角度恢复到 jquery，那么您大部分时间都做错了。在角度应用程序中，onclick 也是不行的，您应该使用 ng-click。我对您的代码进行了快速破解，以展示您应该如何做。我的代码并不完美，因为我没有时间，但可能会给你一个很好的起点。

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js">  </script>
<script>
var angularApp = angular.module('myApp', []);

angularApp.controller('SecuritiesCtrl', function ($scope, $http)
{
    $scope.Securities = {};
    $scope.Quotes = {};
    $scope.message = '';
    $scope.GetQuotes = function(){
        $scope.message = 'Loading...';
        var count = 10;
        var sURL = "http://stevegaines.info/api/Data/GetQuotes?id=" + SecuritiesModel.SecurityID + "&count=" + count + "&extra=1";
        $http.get(sURL).
            success(function (data)
            {
                $scope.Quotes = data;
                $scope.message = '';
            });
    }
    var sURL = "http://stevegaines.info/api/Data/GetSecurities?id=0&securityType=CASH";
    $http.get(sURL).
        success(function (data)
        {
            $scope.Securities = data;
        });
});
</script>
<div ng-app="myApp">
    <div ng-controller="SecuritiesCtrl">
        <select ID="SecurityID" ng-model="SecuritiesModel" ng-options="x.SecurityID as x.TrueSymbol for x in Securities | filter:'USD'">
        </select>
        <button ng-click="GetQuotes()">Get Quotes</button>
        <br />
        <div>{{message}}</div>
        <hr />
    </div>

     <div>
     <table id="QuotesTable">
          <tr>
            <th>Time</th>
            <th>Open</th>
            <th>Hi</th>
            <th>Lo</th>
            <th>Close</th>
          </tr>
          <tr ng-repeat="x in Quotes">
            <td>{{ x.QuoteTime }}</td>
            <td>{{ x.Open }}</td>
            <td>{{ x.Hi }}</td>
            <td>{{ x.Lo }}</td>
            <td>{{ x.Close }}</td>
          </tr>
        </table>
    </div>
</div>

Answer 2

在 garethb 的帮助下，我能够重新编写它，它现在可以工作了。我使用了他写的大部分内容，但是即使我在按钮上使用 ng-click，按钮单击也会导致页面在 ASP.NET 中回发。我通过将 select ng-change 属性连接到 GetQuotes() 解决了这个问题。

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
    <script>
        var angularApp = angular.module('myApp', []);
        angularApp.controller('SecuritiesCtrl', function ($scope, $http)
        {
            $scope.Securities = {};
            $scope.Quotes = {};
            $scope.message = '';
            $scope.GetQuotes = function ()
            {
                $scope.message = 'Loading...';
                var id = $scope.SecuritiesModel;
                var url1 = "http://stevegaines.info/api/Data/GetQuotes?id=" + id + "&count=10&extra=1";
                $http.get(url1).
                    success(function (data)
                    {
                        $scope.Quotes = data;
                        $scope.message = '';
                    });
                return false;
            }
            var url2 = "http://stevegaines.info/api/Data/GetSecurities?id=0&securityType=CASH";
            $http.get(url2).
                success(function (data)
                {
                    $scope.Securities = data;
                });
        });
    </script>
    <div ng-app="myApp">
        <div ng-controller="SecuritiesCtrl">
            Select A Forex Pair:
            <select ng-model="SecuritiesModel" ng-options="x.SecurityID as x.TrueSymbol for x in Securities" ng-change="GetQuotes();" ></select><br />
            Warning: These prices are not current!  Historical quotes only.<br />
            <div>{{ Message }}</div><hr />

         <table id="QuotesTable" style="border: 1px solid black;">
              <tr>
                <th style="border: 1px solid black;">Time</th>
                <th style="border: 1px solid black;">Open</th>
                <th style="border: 1px solid black;">Hi</th>
                <th style="border: 1px solid black;">Lo</th>
                <th style="border: 1px solid black;">Close</th>
              </tr>
              <tr ng-repeat="x in Quotes">
                <td style="border: 1px solid black;">{{ x.QuoteTime | date:"MM/dd/yyyy hh:mm:ss a" }}</td>
                <td style="border: 1px solid black;">{{ x.Open | number:4 }}</td>
                <td style="border: 1px solid black;">{{ x.Hi | number:4 }}</td>
                <td style="border: 1px solid black;">{{ x.Lo | number:4 }}</td>
                <td style="border: 1px solid black;">{{ x.Close | number:4 }}</td>
              </tr>
            </table>
        </div>
    </div>
</asp:Content>