如何在AngularJS頁面中嵌套兩個控制器？

我有一個現有的Web窗體ASP.NET網站。我想在調用我的RESTful Web API的網站上放置一個AngularJS頁面。該頁面有一個在頁面加載時加載的證券選擇列表。我按下一個按鈕，調用另一個RESTful查詢來顯示所選安全性的引號。當我在瀏覽器中直接調用它們時，Web API調用工作。當AngularJS代碼到達讀取「angularApp.controller（'QuotesCtrl'，函數（$ scope，$ http）」的行時失敗。我認爲這與應用程序/控制器/模塊的嵌套方式有關。是我在AngularJS上的第一次嘗試，我認爲我很接近，但我對它還不是很瞭解，可能有一個簡單的方法可以做到這一點，你可以在下面的代碼中看到這個錯誤：如何在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>

來源

2016-04-14 Steve Gaines

你得到的是錯誤的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>

來源

2016-04-15 00:25:47 garethb

感謝。這有幫助。我會看看你發佈的學習Angular鏈接。也許現在我知道足夠去上學了。 :-) –

很高興幫助，當我開始有角度的時候，花了我一個月左右的時間就放棄了jquery！從未回頭！ – garethb

隨着garethb的幫助下，我才得以重新寫這一點，現在的工作。我使用了他編寫的大部分內容，但按鈕單擊會導致頁面在ASP.NET中回發，即使在我使用ng鍵單擊按鈕時也是如此。我通過將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>

來源

2016-04-15 13:54:35

如何在AngularJS頁面中嵌套兩個控制器？

回答

相關問題