3

我的一些措辞可能不正确，尤其是关于 angular/js 术语（控制器、服务、工厂等），但希望它仍然可以理解。此外，这个问题有多个部分，很难在一行中提出。

我有 3 个文件：newRegistration.html、Registration.js和addressVerification.js。

在newRegistration.html中，有一个表单，用户输入他/她的电子邮件、电话、邮寄地址和其他内容，然后单击“下一步”。单击下一步后，将触发Registration.js（控制器？）（？）。

新注册.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)

地址验证.js

使用 Smartystreets API 更正/建议邮寄地址。

我不知道如何将此模块中的变量传递给 Registration.js （范围变量 [?] 所在的位置）以填充ng-repeatnewRegistration.html 。

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-repeat 和控制器的所有内容，但这让我感到困惑。

任何帮助表示赞赏。

4

2 回答 2

1

我实现这一点的方法是公开工厂的方法，允许依赖它的控制器（和控制器的视图）在同一个工厂中存储值。

例如，在下面的代码中，工厂的setCurrent方法在customers工厂中存储了一个值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
        }
    }
});
于 2014-04-20T01:48:06.053 回答
1

您将 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>
于 2014-04-20T00:53:46.403 回答