Question

我是AngularJS的新手，我遇到了我的代码开始重复的情况。我正在考虑创建一个新指令但是现在我对scope / isolated范围/指令的控制器/等有点困惑。的问题。

这是我想要实现的目标。请记住，我的代码已经工作但没有指令，所以我将以非常理论的方式提出这个问题。

我有两个输入，一个用于城市，一个用于邮政编码。

<input get-zip name="city" ng-model="city" ng-blur="getZip();" />
<input name="zip" ng-model="zip" />

当用户进入城市并离开输入字段时，应调用函数getZip（）（传递param：城市输入的值），然后搜索相应的邮政编码并将其输入到zip字段中。

在某些情况下，我们可以在同一表单上有两个city-zip输入。在这种情况下，我们需要将zip输入名称或模型传递给调用函数，因此我们可以将zip值附加到正确的输入。

解决此问题的正确方法是什么？提前谢谢。

Answer 1

将zip和city输入作为指令放在指令中。然后，您可以拥有许多这些对，每个对都有自己的范围。

包含这些元素的指令：

(function () {

    angular.module('myApp.directives').directive('cityZipInputPair', function () {
        return {
            restrict: 'E',
            templateUrl: '/Templates/Directives/CityZipInputPair.html',
            scope: {
                city: '=',
                zip: '='
            },
            controller: ['$scope', function ($scope) {
                $scope.getZip = function(){
                    // handle functionality here with $scope.zip and $scope.city
                }

            }]
        }
    });
}).call(this);

CityZipInputPair.html应该如下所示：

<input get-zip name="city" ng-model="city" ng-blur="getZip();" />
<input name="zip" ng-model="zip" />

然后可以将该指令多次放到页面上，如下所示：

<city-zip-input-pair city="city1" zip="zip1"></city-zip-input-pair>
<city-zip-input-pair city="city2" zip="zip2"></city-zip-input-pair>

AngularJS - DRY（输入字段，函数，指令）

1 个答案: