ng-model in angularjs directive

Question

I am trying to create a directive that would create input(s) field with different types and different numbers. That works fine, but my problem is, I can't use any of my ng-model inside my directive's input field. My code is given below:

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
            }
        };

Why don't you put your current directive logic inside the html itself? It is pretty basic so far. Otherwise you need to [compile](https://docs.angularjs.org/api/ng/service/$compile) it manually like [here](http://stackoverflow.com/a/18157958/1224211) for example. — rinat.io, Aug 16 '14 at 10:15
I don't know which input field (text/textarea) input is used and how much I have use, so how can I do this? — user3587919, Aug 16 '14 at 10:18
I would recommend you reading this post [How do I “think in AngularJS” if I have a jQuery background?](http://stackoverflow.com/q/14994391/867480) — runTarm, Aug 16 '14 at 11:09
It looks overcomplicated. At this point you can achieve same goals without your `invoiceProduct` directive. — rinat.io, Aug 16 '14 at 11:45

score 0 · Answer 1 · answered Aug 16 '14 at 18:45

There are some options here, both alluded to in the comments.

First, if you want to mess around with the DOM, you'll want to use a compile function rather than a link one. That said, I don't think that you have to do it that way.

In your template, you could do stuff like:

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

So you don't have to muck around in the DOM at all really - let angular handle it for you.

Also important: if you are building an isolate-scope directive, there's no need to uniqueificate your model names. scope.quantity on the first invoice-product instance has nothing to do with scope.quantity on the second. They're isolated. So you don't have to programmatically specify ng-model names.

That commented-out stuff in your controller ($scope['Quantity'+i]) - speaks to this. The stuff in the directives isn't accessible in the parent scope really. One way to do this are to stick a kind of "return value" attribute on the directive if you add quantity='=' to the directive scope declaration, you'd end up being able to stick a parent variable in there to receive the user's input. Or you could add an "on-finished" type method attribute like

Or you could skip over the directive entirely and just do some ng-repeats. In that case, instead of using programmatically-generated model names, you could just have $scope.quantities = [], so

Lots of ways to do this, but in general if you're directly manipulating the DOM instead of using ng-if and ng-repeat, the odds are very good that you're fighting the framework.

ng-model in angularjs directive

1 Answers1