Question

我正在尝试创建一个指令，该指令将创建具有不同类型和不同数字的输入字段。这很好，但我的问题是，我不能在我的指令的输入字段中使用我的任何ng-model。我的代码如下：

HTML ::

<form method="post" ng-submit="CheckAddReceivedGoods($event, limit)" novalidate>
     <ul class="checkboxUl" ng-repeat="cat in InvoicesProduct">
        <invoice-product info="cat" num="$index"></invoice-product>
    </ul>
</form>

AngularJS Code ::

var apps = angular.module("ReceivedGoodsApps", ['ngRoute']);

    apps.directive("invoiceProduct", function () {
        return {
            restrict: "E",
            scope: {
                productList: "=info",
                pos: "=num"
            },
            template: '<div>',
            link: function (scope, element, attrs) {
                var template = '';
                position = scope.pos + 1;            
                HasUniqueSpecifier = scope.productList.HasUniqueSpecifier;

                if (HasUniqueSpecifier === "NoUniqueIdentifier") {
                    template += '<input type="text" ng-model="Quantity' +  position + '" />';                        
                } else if (HasUniqueSpecifier === "UniqueIdentifier") {
                  template += '<textarea rows="7" cols="35" ng-model="UniqueIdentifier' + position + '" ></textarea>';
                } else if (HasUniqueSpecifier === "SerialUniqueIdentifier") {
                     template += '<input type="text" ng-model="end' + position + '"  /> ';
                }
                element.find('div').append(template);
            }
        };
    });

    apps.controller("ReceivedGoodsCtrl", function ($scope, $http) {
        $scope.CheckAddReceivedGoods = function ($event, limit) {

            for (var i = 1; i <= limit; i++) {
                // $scope['Quantity' + i] is undefined
                // $scope['UniqueIdentifier' + i]  is undefined
                // $scope['start' + i] is undefined
            }
        };

Answer 1

这里有一些选项，都在评论中提到。

首先，如果你想搞乱DOM，你会想要使用编译功能而不是链接功能。也就是说，我不认为你必须这样做。

在您的模板中，您可以执行以下操作：

<input type="text" ng-model="quantity" ng-if="productlist.HasUniqueSpecifier === 'NoUniqueIdentifier'">

所以你真的不必在DOM中捣乱 - 让角度为你处理它。

同样重要的是：如果要构建isolate-scope指令，则无需对模型名称进行唯一标识。第一个invoice-product实例上的scope.quantity与第二个上的scope.quantity无关。他们被隔离了。因此，您不必以编程方式指定ng-model名称。

控制器($scope['Quantity'+i])中注释掉的东西 - 说明了这一点。指令中的内容实际上无法在父作用域中访问。一种方法是坚持一种＆＃34;返回值＆＃34;如果你添加数量=＆＃39; =＆＃39;在指令范围声明中，您最终能够在其中粘贴父变量以接收用户的输入。或者你可以添加一个＆＃34; on-finished＆＃34;类型方法属性，如

或者你可以完全跳过指令，只做一些ng-repeats。在这种情况下，您可以只使用$ scope.quantities = []，而不是使用以编程方式生成的模型名称

有很多方法可以做到这一点，但总的来说，如果你直接操纵DOM而不是使用ng-if和ng-repeat，那么你在战斗中的几率非常高框架。

angularjs指令中的ng-model

1 个答案: