CODEWITHSUNDEEP
javascriptangularjs
KAD
KAD

Reputation: 11122

Making directive scope unique per each directive?

I am trying to create a component that builds form fields dynamically using Angular (which I am new to).

The controller contains data of the form fields I will be viewing as follows in mainModel :

angular.module('formExample', [])
    .controller('ExampleController', ['$scope', function ($scope) {

    // build the scope dynamically 
    $scope.mainModel = {
        "category_id": {
            "name": "category_id",
                "value": "1",
                "label": "Category Id"
        },
            "category_name": {
            "name": "category_name",
                "value": "First Category",
                "label": "Category Name"
        });

}]).directive('formLoader', function ($compile) {

    function link(scope, ele, attrs) {

        var html = '';
        jQuery.each(scope.mainModel, function (key, value) {
            //display the key and value pair
            console.log(key + ' --------------- ' + value);

            if (key == 'category_id' || key == 'category_name') {
                html += "<br />Testing<br /><kad-Input properties='mainModel." + key + "'></kad-Input>"
            }

        });

        var x = angular.element(html);
        ele.append(x);
        $compile(x)(scope);

    }

    return {
        restrict: 'E',
        scope: false,
        link: link
    };

}).directive('kadInput', function ($parse) {
    return {
        restrict: 'E',
        //transclude: true,
        scope: false,
        templateUrl: 'tests.html',
        link: function (scope, ele, attrs) {

            scope.properties = $parse(attrs.properties)(scope);
            console.log(scope.properties);

        }
    };
});

The idea is to loop through the mainModel and build the form dynamically based on the main Model, this is the job of the formLoader directive which is the only thing I will be calling in my HTML.

I have created a directive kadInput (just for testing) that resembles a "label : text input" html as follows :

<div class="col-lg-2 col-md-2 col-sm-12 bottom-10" >
    <h4 class="header_label" ><label for="productName"> {{properties.label}} </label></h4>
</div>  

<div class="col-lg-9 col-md-9 col-sm-12" >
    <input type="text" id="productName" ng-model="properties.value" class="form-control" />
</div>

I am getting the result needed but the problem is that the scope.properties of kadInput is not unique by directive, it is only taking the data that is being last set to it.

How can I make the scope unique per directive keeping the same aspect of my code?

Upvotes: 1

Views: 40

Answers (1)

Alexis King
Alexis King

Reputation: 43902

You're doing a lot of things unnecessarily here that Angular directives do for you. I would recommend you do a thorough reading of the directives guide—it's very easy to understand.

The relevant point here is the idea of an "isolate scope", which you're explicitly opting out of by using scope: false (which does nothing, by the way), and then reading from attrs manually, which is mostly just negating what directives are designed to do.

What you want is to pass an object to scope that will specify that you want an isolate scope with a single parameter:

scope: {
  properties: '='
}

This will set up the data-binding for you, and it will keep the scopes unique between instances of your directive.

Upvotes: 1

Related Questions