在控制器之间传递一个变量,并在同一页上使用ng repeat



我的一些措辞可能不正确,尤其是关于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
        }
    }
});

最新更新