angularjs - my Controller is working fine but Directive is not -
ok, angularjs controller have directive well. when run application main page design controller working when tried re-use directive cant see anything, new html page empty.
angularjs controller:
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 controller:
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(); } } } my main-page 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 c.countryname 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 s.statename 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 r.regionname 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 s.statename 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 r.regionname 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 c.countryname 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 s.statename 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 r.regionname 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 s.statename 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 r.regionname 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> new html re-use directive:
@{ 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>
it looks have syntax error in directive dropdowncontroller should string this:
app.directive('dropdowndirective', function () { return { restrict: 'e', templateurl: 'addresscontrol', controller: 'dropdowncontroller', replace:true, } }); not sure why wouldn't error message though...
Comments
Post a Comment