我正在尝试将Angular JS与ASP.NET应用程序一起使用。

我为主页(母版页)定义了该应用程序,并且运行良好。现在,我在其他页面上遇到了多个问题。

当我定义使用此母版页的子页时,它必须使用自己的应用程序。所以


我们在哪里可以在子页面上定义应用程序和控制器属性。
如果我在DIV容器上定义它们,则不喜欢它。它说-Argument 'cityPageCtrl' is not a function, got undefined


在我的母版页中,我添加了以下引用:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-cookies.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

    <script src="<%=ApplicationPath %>lib/js/ui-bootstrap-tpls-0.12.1.min.js"></script>
    <script src="<%=ApplicationPath %>cust/js/templateApp.js"></script>
    <script src="<%=ApplicationPath %>cust/js/mainPageApp.js"></script>
    <script src="<%=ApplicationPath %>lib/js/parallax.min.js"></script>


在我的子页面中,以下是我必须使用另一个ng应用程序的代码:

<asp:Content ID="Content1" ContentPlaceHolderID="headContent" runat="server">
    <script src="../cust/js/cityPageApp.js"></script>
    <title ng-bind="'Restaurants in '+cityName+' | Restaurants'">Restaurants in your city serving online | Online Restaurnats</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="bodyContent" runat="server">
   <div ng-app="cityPage" ng-controller="cityPageCtrl">
</div>
</asp:Content>


以下是我在cityPage js文件中为Angular定义的应用程序。

var app = angular.module('cityPage', ['ui.bootstrap', 'templateModule', 'ngCookies']);
app.controller("cityPageCtrl", function($scope, $http, $modal, $cookies, $interval)

最佳答案

理想情况下,您应该为此创建多个模块。您的子页面应创建自己的模块,然后将其添加为对主模块的引用。

    var mainApp= angular.module('main', ['childApp']);  //child 1


您也可以尝试使用angular.bootstrap手动引导

    angular.bootstrap(document.getElementById("divId"), ['myChildModule']);

10-05 20:57
查看更多