Question

我有一个编辑地址的视图，它附有一个控制器。它获取所有州和地区，通过一些内部命名法，允许用户选择国家/州，允许用户输入邮政编码，并获取正确的城市等。还有验证，以及填充的模型。这也取决于一些服务器端服务。现在，我需要在5-6个表单中使用这个完全相同的功能。我不想复制或重复逻辑，我想在视图中将其声明为指令，并将完整模型（Address）绑定到封闭视图的模型。我该怎么做呢？如何在视图控制器和指令控制器之间建立连接，以及如何在视图模型（vm.address）和封闭模型（例如vm.client.address）之间建立连接？

假设我有这个与之关联的控制器（addressEditCtrl）的html片段。

<div class="row" data-ng-controller="addressEditCtrl">
    <div class="col-xs-3">
        <div class="form-group">
            <label>Address:</label>
            <span style="margin-left: 10px; font-weight: normal; font-size: 9px;">
                <a href="" style="height: 7px;" data-ng-click="vm.clearAddress()">Clear</a>
            </span>

            <textarea class="form-control" style="height: 80px; width: 300px;"
                      data-ng-model="vm.address.street" maxlength="255"></textarea>
        </div>
    </div>
    <div class="col-xs-6">
        <div class="row">
            <div class="col-xs-3">
                <label for="zipCode">Zip Code:</label><br>
                <input id="zipCode" type="text" class="form-control" placeholder="" style="float: left; width: 45%; margin-right: 10px;"
                       data-ng-model='vm.address.zipCode'
                       data-ng-blur="vm.bindZipCodeInfo()" maxlength="5">

                <input id="zipCode2" name="zipCode2" type="text" class="form-control" placeholder="" style="float: left; width: 45%;"
                       data-ng-model='vm.mailingZipPlus' maxlength="4">
            </div>
            <div class="col-xs-4">
                <label for="city">City:</label>
                <input id="city" type="text" class="form-control" placeholder=""
                       data-ng-model='vm.address.city' maxlength="30">
            </div>
            <div class="form-group col-xs-5 p-0">
                <label for="county">County:</label>
                <input id="county" class="col-xs-12" type="text" disabled
                       data-ng-model='vm.address.countyName'>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-6">
                <label for="states">State:</label>
                <select id="states" class="form-control"
                        data-ng-model="vm.address.stateCode"
                        data-ng-options="state.Code as state.Description for state in vm.states">
                    <option value=''> Please Select</option>
                </select>
            </div>
            <div class="col-xs-6">
                <label for="countries">Country:</label>
                <select id="countries" class="form-control"
                        data-ng-model="vm.selectedCountry"
                        data-ng-options="country as country.Description for country in vm.countries"></select>

            </div>
        </div>
    </div>
</div>

我想把它变成指令。这篇文章不起作用，因为在链接函数范围不同（指令vs addressEditorCtrl）。我也不确定我是否需要在指令上定义链接或控制器，因为我没有操纵任何东西。

(function (angular) {
    'use strict';

    angular
        .module('app')
        .directive('srAddressEditor', srAddressEditor);

    srAddressEditor.$inject = [];

    function srAddressEditor() {
        var directive = {
            templateUrl: '/app/shared/addressEditor/addressEdit.html',
            scope: {
                address:'=address'
            }
        };

        return directive;
    }
})(angular);

这就是我所追求的，双向约束。上述地址编辑器中的vm.client.mailingAddress和vm.address具有相同的形状。其中任何一个中的任何更改都应该同步。我也希望能够将多个这些放在表单上，因此我所依赖的孤立范围。

<div data-ng-controller="clientEditCtrl">
  <div class="col-xs-12">
            <sr-address-editor address="vm.client.mailingAddress"></sr-address-editor>
        </div>
</div>

如何在angularjs中重用“组件”？

0 个答案: