AngularJS控制器：
var app = angular.module('dropDown', []);
app.controller('DropDownController', function ($scope, $http) {
GetCountries();
function GetCountries() {
$http({
method: 'Get',
url: '/Home/GetCountries'
}).success(function (data) {
$scope.countries = data;
}).error(function (data) {
$scope.message = 'Unexpected Error';
});
}
$scope.GetStates = function () {
var countryId = $scope.country;
if (countryId) {
$http({
method: 'POST',
url: '/Home/GetStates',
data: JSON.stringify({ countryID: countryId })
}).success(function (data) {
$scope.states = data;
}).error(function (data) {
$scope.message = 'Unexpected Error';
});
}
else {
$scope.states = null;
}
}
$scope.GetRegion = function () {
var countryId = $scope.country;
if (countryId) {
$http({
method: 'POST',
url: '/Home/GetRegion',
data: JSON.stringify({ countryID: countryId })
}).success(function (data) {
$scope.regions = data;
}).error(function (data) {
$scope.message = 'Unexpected Error';
});
}
else {
$scope.regions = null;
}
}
$scope.GetShippingStates = function () {
var countryId2 = $scope.country2;
if (countryId2) {
$http({
method: 'POST',
url: '/Home/GetStates',
data: JSON.stringify({ countryID: countryId2 })
}).success(function (data2) {
$scope.states2 = data2;
}).error(function (data2) {
$scope.message = 'Unexpected Error';
});
}
else {
$scope.states2 = null;
}
}
$scope.GetShippingRegion = function () {
var countryId2 = $scope.country2;
if (countryId2) {
$http({
method: 'POST',
url: '/Home/GetRegion',
data: JSON.stringify({ countryID: countryId2 })
}).success(function (data2) {
$scope.regions2 = data2;
}).error(function (data2) {
$scope.message = 'Unexpected Error';
});
}
else {
$scope.regions2 = null;
}
}
});
app.directive('dropdowndirective', function () {
return function() {
restrict= 'E',
transclude= true,
templateUrl= '@Url.Action("AddressControl","Home")',
//templateUrl= '/Home/AddressControl',
controller = 'DropDownController',
replace=true
}
});
MVC控制器：
using CountryAddressApp.Models;
using System;
using System.Collections.Generic;
using System.Linq;using System.Web;
using System.Web.Mvc;
namespace CountryAddressApp.Controllers
{
public class HomeController : Controller
{
public ActionResult AddressControl()
{
return View();
}
public JsonResult GetCountries()
{
using (CountryAddressEntities context = new CountryAddressEntities())
{
var ret = context.Countries.Select(x => new { x.CountryID, x.CountryName }).ToList();
return Json(ret, JsonRequestBehavior.AllowGet);
}
}
[HttpPost]
public JsonResult GetStates(int countryId)
{
using (CountryAddressEntities context = new CountryAddressEntities())
{
var ret = context.States.Where(x => x.CountryID == countryId).Select(x => new { x.StateID, x.StateName }).ToList();
return Json(ret);
}
}
[HttpPost]
public JsonResult GetRegion(int countryId)
{
using (CountryAddressEntities context = new CountryAddressEntities())
{
var ret = context.Regions.Where(x => x.CountryID == countryId).Select(x => new { x.RegionID, x.RegionName }).ToList();
return Json(ret);
}
}
public ActionResult Index()
{
return View();
}
public ActionResult Testing()
{
return View();
}
}
}
我的主页 AddressControl.cshtml
@{
Layout = null;
}
<!DOCTYPE html>
<html data-ng-app="dropDown">
<head>
<meta name="viewport" content="width=device-width" />
<title>Multi-National Address</title>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/cascade.js"></script>
</head>
<body data-ng-controller="DropDownController">
<table class="container">
<tr>
<td><b>Billing Address</b></td>
<td><b>Shipping Address</b></td>
</tr>
<tr>
<td>
<div>
<div>
<form name="mainForm" data-ng-submit="sendForm()" novalidate>
<div class="error">{{message}}</div>
<div>
<table>
<tr>
<td>
<label>Select Country: </label>
</td>
<td>
<select data-ng-model="country" data-ng-options="c.CountryID as c.CountryName for c in countries" data-ng-change="GetStates()">
<option value="">-- Select Country --</option>
</select>
</td>
</tr>
</table>
</div>
<div ng-show="country==1">
<table>
<tr>
<td>
<label>Select State: </label>
</td>
<td>
<select data-ng-model="state" data-ng-disabled="!states" data-ng-options="s.StateID as s.StateName for s in states" data-ng-change="GetRegion()">
<option value="">-- Select State --</option>
</select>
</td>
</tr>
<tr>
<td>
<label>Select Region: </label>
</td>
<td>
<select data-ng-model="region" data-ng-disabled="!regions" data-ng-options="r.RegionID as r.RegionName for r in regions">
<option value="">-- Select Region --</option>
</select>
</td>
</tr>
<tr>
<td>
<label>Address:</label>
</td>
<td>
<input id="Address" name="Address" placeholder="Address" type="text" />
</td>
</tr>
<tr>
<td>
<label>Address 2:</label>
</td>
<td>
<input id="Address2" name="Address2" placeholder="Address 2" type="text" />
</td>
</tr>
<tr>
<td>
<label>City:</label>
</td>
<td>
<input id="city" name="city" placeholder="City" type="text" />
</td>
</tr>
<tr>
<td>
<label>Zip Code:</label>
</td>
<td>
<input id="zipcode" name="zipcode" placeholder="Zip Code" type="text" />
</td>
</tr>
</table>
</div>
<div ng-show="country==2">
<table>
<tr>
<td>
<label>Select Province: </label>
</td>
<td>
<select data-ng-model="state" data-ng-disabled="!states" data-ng-options="s.StateID as s.StateName for s in states" data-ng-change="GetRegion()">
<option value="">-- Select Province --</option>
</select>
</td>
</tr>
<tr>
<td>
<label>Select Region: </label>
</td>
<td>
<select data-ng-model="region" data-ng-disabled="!regions" data-ng-options="r.RegionID as r.RegionName for r in regions">
<option value="">-- Select Region --</option>
</select>
</td>
</tr>
<tr>
<td>
<label>Address:</label>
</td>
<td>
<input id="Address" name="Address" placeholder="Address" type="text" />
</td>
</tr>
<tr>
<td>
<label>Address 2:</label>
</td>
<td>
<input id="Address2" name="Address2" placeholder="Address 2" type="text" />
</td>
</tr>
<tr>
<td>
<label>City:</label>
</td>
<td>
<input id="city" name="city" placeholder="City" type="text" />
</td>
</tr>
<tr>
<td>
<label>Postal Code:</label>
</td>
<td>
<input id="postalcode" name="postalcode" placeholder="Postal Code" type="text" />
</td>
</tr>
</table>
</div>
</form>
</div>
</div>
</td>
<td>
<div>
<div>
<form name="mainForm" data-ng-submit="sendForm()" novalidate>
<div class="error">{{message}}</div>
<div>
<table>
<tr>
<td>
<label>Select Country: </label>
</td>
<td>
<select data-ng-model="country2" data-ng-options="c.CountryID as c.CountryName for c in countries" data-ng-change="GetShippingStates()">
<option value="">-- Select Country --</option>
</select>
</td>
</tr>
</table>
</div>
<div ng-show="country2==1">
<table>
<tr>
<td>
<label>Select State: </label>
</td>
<td>
<select data-ng-model="state2" data-ng-disabled="!states2" data-ng-options="s.StateID as s.StateName for s in states2" data-ng-change="GetShippingRegion()">
<option value="">-- Select State --</option>
</select>
</td>
</tr>
<tr>
<td>
<label>Select Region: </label>
</td>
<td>
<select data-ng-model="region2" data-ng-disabled="!regions2" data-ng-options="r.RegionID as r.RegionName for r in regions2">
<option value="">-- Select Region --</option>
</select>
</td>
</tr>
<tr>
<td>
<label>Address:</label>
</td>
<td>
<input id="Address" name="Address" placeholder="Address" type="text" />
</td>
</tr>
<tr>
<td>
<label>Address 2:</label>
</td>
<td>
<input id="Address2" name="Address2" placeholder="Address 2" type="text" />
</td>
</tr>
<tr>
<td>
<label>City:</label>
</td>
<td>
<input id="city" name="city" placeholder="City" type="text" />
</td>
</tr>
<tr>
<td>
<label>Zip Code:</label>
</td>
<td>
<input id="zipcode" name="zipcode" placeholder="Zip Code" type="text" />
</td>
</tr>
</table>
</div>
<div ng-show="country2==2">
<table>
<tr>
<td>
<label>Select Province: </label>
</td>
<td>
<select data-ng-model="state2" data-ng-disabled="!states2" data-ng-options="s.StateID as s.StateName for s in states2" data-ng-change="GetShippingRegion()">
<option value="">-- Select Province --</option>
</select>
</td>
</tr>
<tr>
<td>
<label>Select Region: </label>
</td>
<td>
<select data-ng-model="region2" data-ng-disabled="!regions2" data-ng-options="r.RegionID as r.RegionName for r in regions2">
<option value="">-- Select Region --</option>
</select>
</td>
</tr>
<tr>
<td>
<label>Address:</label>
</td>
<td>
<input id="Address" name="Address" placeholder="Address" type="text" />
</td>
</tr>
<tr>
<td>
<label>Address 2:</label>
</td>
<td>
<input id="Address2" name="Address2" placeholder="Address 2" type="text" />
</td>
</tr>
<tr>
<td>
<label>City:</label>
</td>
<td>
<input id="city" name="city" placeholder="City" type="text" />
</td>
</tr>
<tr>
<td>
<label>Postal Code:</label>
</td>
<td>
<input id="postalcode" name="postalcode" placeholder="Postal Code" type="text" />
</td>
</tr>
</table>
</div>
</form>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
重新使用指令的新html：
@{
Layout = null;
}
<h2>Index</h2>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/cascade.js"></script>
<body ng-app="dropDown" ng-controller="DropDownController">
<dropdowndirective>
</dropdowndirective>
@*<div class="DropDownDirective"></div>
<div ng-DropDownDirective></div>*@
</body>
答案 0 :(得分：0)
看起来你的指令中有一个语法错误，其中dropDownController应该是这样的字符串：
app.directive('DropDownDirective', function () {
return {
restrict: 'E',
templateUrl: 'AddressControl',
controller: 'DropDownController',
replace:true,
}
});
不确定为什么你不会收到错误消息，但是......