-1
我正在嘗試使用角度js中的自定義指令來實現下面的用例。Angular js自定義指令和2種方式的數據綁定問題
有3套不同的地址信息公司的形式填寫。
- 公司地址
- 範圍地址
- 司地址
需要定義一個定製地址指令，可以重複使用上述。 一旦用戶指定了所需的信息，封裝這3組地址的公司對象將通過Web服務調用持久保存到後端數據存儲中。
相關的代碼文件上傳到plunker：http://plnkr.co/edit/H8Cmlf?p=info
地址指令：
angular.module('address.module')
.directive('qiAddress', function() {
return {
restrict: 'E',
scope: {
qiAddressInfo: '=instance'
},
templateUrl: 'address.html'
};
});
地址控制器：
angular.module('address.module')
.controller('address.controller', AddressController);
AddressController.$inject = ['AddressService'];
function AddressController(AddressService){
var vm = this;
//vm.qiAddressInfo = AddressService.newAddress();
vm.cities = AddressService.getCities();
vm.states = AddressService.getStates();
vm.countries = AddressService.getCountries();
vm.postalCodes = AddressService.getPostalCodes();
}
地址服務：
/**
*
*/
angular.module('address.module')
.factory('AddressService', AddressService);
function AddressService($http){
var cities = [];
var states = [];
var countries = [];
var postalCodes = [];
function Address(){
this.name = null;
this.street = null;
this.city = null;
this.state = null;
this.country = null;
this.postalCode = null;
};
//declare functions for closure
var service = {
//Address Object
newAddress : newAddress,
//Values to populate various drop downs
getCities : getCities,
getStates : getStates,
getCountries : getCountries,
getPostalCodes : getPostalCodes,
};
return service;
//function definitions
function newAddress(){
return new Address();
}
function getCities(){
//TODO - Get the list of cities from back end vi a web service call
if (cities === null || cities.length === 0){
cities = ["Bangalore",
"Mumbai",
"Chennai",
"Hyderabad",
"Delhi",
"Calcutta"
];
}
console.log(cities);
return cities;
}
function getStates(){
//TODO - Get the list of states from back end vi a web service call
if (states === null || states.length === 0){
states = ["Karnataka",
"Maharashtra",
"Tamil Nadu",
"Andhra Pradesh",
"Delhi",
"West Bengal"
];
}
return states;
}
function getCountries(){
//TODO - Get the list of countries from back end vi a web service call
if (countries === null || countries.length === 0){
countries = ["India"];
}
return countries;
}
function getPostalCodes(){
//TODO - Get the list of postal codes from back end vi a web service call
if (postalCodes === null || postalCodes.length === 0){
postalCodes = ['560079',
'560078',
'560077'
];
}
return postalCodes;
}
};
Address.html：
<div ng-controller="address.controller as vm">
<!-- <div id="addressContainer" class="container"> -->
<div class="form-group">
<label for="address.name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-4">
<input class="form-control input-sm" id="address.name" ng-model="vm.qiAddressInfo.name"
placeholder="Enter Name"/>
</div>
</div>
<div class="form-group">
<label for="address.street" class="col-sm-2 control-label">Street</label>
<div class="col-sm-4">
<input class="form-control input-sm" id="address.street" ng-model="vm.qiAddressInfo.street"
placeholder="Enter Street"/>
</div>
</div>
<div class="form-group">
<label for="address.city" class="col-sm-2 control-label">City</label>
<select name="address.city" id="address.city" ng-model="vm.qiAddressInfo.city">
<option ng-repeat="city in vm.cities" value="{{city}}">{{city}}</option>
</select>
</div>
<div class="form-group">
<label for="address.state" class="col-sm-2 control-label">State</label>
<select name="address.state" id="address.state" ng-model="vm.qiAddressInfo.state">
<option ng-repeat="state in vm.states" value="{{state}}">{{state}}</option>
</select>
</div>
<div class="form-group">
<label for="address.country" class="col-sm-2 control-label">Country</label>
<select name="address.country" id="address.country" ng-model="vm.qiAddressInfo.country">
<option ng-repeat="country in vm.countries" value="{{country}}">{{country}}</option>
</select>
</div>
<div class="form-group">
<label for="address.postalCode" class="col-sm-2 control-label">Postal
Code</label>
<select name="address.postalCode" id="address.postalCode" ng-model="vm.qiAddressInfo.postalCode">
<option ng-repeat="postalCode in vm.postalCodes" value="{{postalCode}}">{{postalCode}}</option>
</select>
</div>
</div>
公司detail.html：（包括下面相關章節。有關完整的文件是指plunker） .... 公司地址
<!-- Range Address -->
<div class="panel panel-primary">
<div class="panel-heading">Range Address</div>
<div class="panel-body">
<qi-address instance="vm.company.rangeAddress"></qi-address>
</div>
</div>
<!-- Division Address -->
<div class="panel panel-default">
<div class="panel-heading">Division Address</div>
<div class="panel-body">
<qi-address instance="vm.company.divisionAddress" ng-model="vm.company.divisionAddress"></qi-address>
</div>
</div>
公司控制：
/**
*
*/
angular.module('company.detail.module', ['address.module'])
.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];}])
.controller('company.detail.controller', CompanyDetailController);
CompanyDetailController.$inject = ['$scope', '$http','AddressService'];
function CompanyDetailController($scope, $http, AddressService){
var vm = this;
/* - should we specify these here for placeholder text.. not sure..
vm.companyCode = 'Enter Company Code';
vm.companyName = 'Enter Company Name';
vm.companyPhone = 'Enter Phone';
vm.companyFax = 'Enter Fax';
vm.companyECCNumber = 'Enter ECC Number';
vm.companyTIN = 'Enter TIN';
vm.companyTINDate = 'Select TIN Date';
vm.companyCSTNumber = 'Enter CST Number';
vm.companyCSTDate = 'Select CST Date';*/
vm.cities = AddressService.getCities();
vm.states = AddressService.getStates();
vm.countries = AddressService.getCountries();
vm.postalCodes = AddressService.getPostalCodes();
vm.company = {};
vm.company.companyCode;
vm.company.companyNm;
vm.company.companyPhone;
vm.company.companyFax;
vm.company.companyEccNbr;
vm.company.companyTinNbr;
vm.companyTinDt;
vm.company.companyCst;
vm.company.companyCstDt;
/*
* Address objects - Instantiate new address objects.
* The content of this will(should) be set via the directive qi-address-info
*/
vm.company.companyAddress = AddressService.newAddress();
vm.company.rangeAddress = AddressService.newAddress();
vm.company.divisionAddress = AddressService.newAddress();
//TODO - Move this function to Company Service/Factory
vm.createCompany = function(company) {
console.log("JSON REQUEST for creating company: " +angular.toJson(company, true));
$http({
method: 'POST',
url: 'something appropriate',
data : vm.company
}).then(function(response) {
// this callback will be called asynchronously
// when the response is available
console.log("Create: Response returned form web service: " +response);
}, function (response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
console.log("Error from web service for Create. Response: " +response);
});
};
};
公司細節模塊：
問題（S）我面對：
在指令的HTML中指定的信息不綁定於母公司對象。
我所觀察到的：當我通過瀏覽器（batarang）調試，在最裏面的範圍模型，在（預期）的用戶類型，但在父範圍內的公司對象具有值地址屬性的空值。
我是NG-小白和JS-小白。
我將不勝感激任何意見和方向
請簡化您的問題，只需發佈相關代碼，您不需要指定所有代碼，例如：var app = angular.module（'company.detail.module'，['address.module'] ）; – que1326
Noted..Was想修改我的問題發言，但發現另一個人peso_junior下面提供了一個可行的解決方案。但是，我會記住你的建議向前發展，我應該需要張貼任何問題 – sbelvadi