我的一些措辞可能不正确,尤其是关于angular/js术语(控制器、服务、工厂等),但希望它仍然可以理解。此外,这个问题有多个部分,因此很难在一行中提问。
我有3个文件:newRegistration.html、Registration.js、和addressVerification.js.
在newRegistration.html中,有一个表单,用户可以在其中输入他的/她的电子邮件、电话、邮寄地址和其他内容,然后单击"下一步"。单击下一步,Registration.js(控制器?)将被触发(?)。
newRegistration.html
在下面的代码段中是ng-repeat
,我想用addressVerification.js.中的新数据更新它
<div id="dialog-form" title="CHOOSE THE CORRECT ADDRESS">
<ul>
<li ng-repeat="for item in [not sure what to put here because of two js files]">
</li>
</ul>
</div>
注册.js
包含上述ng-repeat
的模板的控制器。
最上面一行是这样的:
angular.module('appname')
.controller('RegistrationCtrl', function ($scope, $http, cacheStore, countryStates, birthYear, $anchorScroll, errorMessages, addressVerification, UtilsFactory)
这是一条可能相关的线路:
addressVerification.verify(user).then(function (userObj)
addressVerification.js
使用Smartystreets API更正/建议邮件地址。
我不知道如何将变量从该模块传递到Registration.js(作用域变量[?]在哪里),以便在newRegistration.html.中填充ng-repeat
angular.module('appname').factory('addressVerification', function($q, userIdentity, $http, smartyToken) {
"use strict";
return {
verify: function(obj) {
var deferred = $q.defer(),
street2QS = "";
if (obj.address2 || obj.address2 !== "") {
street2QS = "&street2=" + encodeURIComponent(obj.address2);
}
$http.jsonp("https://api.smartystreets.com/street-address?street=" + encodeURIComponent(obj.address1)
+ street2QS
+ "&city=" + encodeURIComponent(obj.city)
+ "&state=" + encodeURIComponent(obj.state)
+ "&zipcode=" + encodeURIComponent(obj.zip)
+ "&source=website&auth-token="+ smartyToken.get() + "&candidates=5&callback=JSON_CALLBACK")
.success(function (response) {
var metaData,
components;
if (response && response.length === 1) {
metaData = response[0].metadata || {};
components = response[0].components || {};
angular.extend(obj, {
"address1": [
components.primary_number,
components.street_name,
components.street_suffix
].join(" "),
"address2": [
components.secondary_designator,
components.secondary_number
].join(" "),
"city": components.city_name,
"county_name": metaData.county_name,
"county_fips": metaData.county_fips,
"state": components.state_abbreviation,
"latitude": metaData.latitude,
"longitude": metaData.longitude,
"plus4_code": components.plus4_code,
"zip": components.zipcode
});
deferred.resolve(obj);
} else {
deferred.reject(false);
}
}).error( function() {
deferred.reject(false);
});
return deferred.promise;
}
};
});
我现在很无知。我想我已经提供了所有必要的细节。我希望我知道从哪里开始。我读过所有关于延迟对象、ng重复和控制器的内容,但这让我很困惑
感谢您的帮助。
您正在将addressVerification注入RegistrationCtrl。注入RegistrationCtrl的addressVerification的值是通过执行您在此处定义的函数返回的值:
angular.module('appname')
.factory('addressVerification', function($q, userIdentity, $http, smartyToken)
因此,您可以访问RegistrationCtrl.js文件中addressVerification.js文件内部发生的事情,方法是将方法添加到您在该函数中返回的任何内容中。
一旦您在RegistrationCtrl中有了数据,您就可以通过将数据附加到RegistrationCtrl内部的范围来从视图中访问它。示例:
这将进入RegistrationCtrl.js:
$scope.someItems = [1, 2, 3, 4];
这将在视图中进行:
<li ng-repeat="item in someItems">{{item}}</li>
我实现这一点的方法是公开工厂的方法,允许依赖它的控制器(和控制器的视图)在同一工厂中存储值。
例如,在以下代码中,customers
工厂的setCurrent
方法在工厂中存储一个值current
。因为工厂是单身汉,所以会在应用程序中持久存在。即使在用户单击<a>
(在以下示例中)并将其带到href="/"
之后,如果同一工厂是两个控制器的依赖项,则存储在customers.current
中的值也将可由"/"路由的控制器访问。
模板
<ul>
<li>{{customers.current.name}}</li>
<li
ng-repeat="customer in customers.all"
>
<a
class="action name"
ng-click="customers.setCurrent(customer)"
href="/"
>
{{customer.name}}
</a>
</li>
</ul>
控制器
angular
.module('CtrlCustomerList', [
'CollectionCustomers',
])
.controller('CtrlCustomerList', function($scope, CollectionCustomers) {
$scope.customers = CollectionCustomers;
});
工厂
angular
.module('CollectionCustomers', [
])
.factory("CollectionCustomers", function(Restangular, ModelCustomer, $location) {
return {
all : [],
current : null,
setCurrent : function() {
// Affect this.current
}
}
});