CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scope
allencoded
allencoded

Reputation: 7275

Directive inside another directive with a single object

I have an object that looks like so:

RecruitingGroups 
{
   GroupName = "stuff",
   GroupTarge = 1,
   Rule =
   {
     Id = 1,
     Match = All,
     Tags = 
     {
       1,
       2,
     }
   }
}

My Angular is like so:

app.directive('creategroup', function () {
    return {
        restrict: 'E',
        templateUrl: '../../Content/templates/RecruitingGroups/CreateGroup.html',
        link: function (scope, el) {
            scope.groups = data.RecruitingGroups;

            scope.createGroup = function () {
                scope.groups.push({ id: scope.groups.length });
            }
        }
    }
});

app.directive('group', function () {
    return {
        restrict: 'E',
        scope: true,
        templateUrl: '../../Content/templates/RecruitingGroups/Group.html',
        link: function (scope, el) {
            scope.rules = [];
            scope.addRule = function () {
                scope.rules.push({ id: scope.rules.length });
            }
        }
    }
});

app.directive('rule', function () {
    return {
        restrict: 'E',
        scope: true,
        templateUrl: '../../Content/templates/RecruitingGroups/Rule.html',
        link: function (scope, el) {
            scope.tags = [];
            scope.addTag = function () {
                scope.tags.push({ id: scope.tags.length + 1 });
            }
        }
    }
});

I am struggling for words here, but how do I make the rule object (which is a child of the group object) fall in the right place of the directive. Maybe showing a screen shot of the expected output would explain more... Groups

Notice there are 2 groups in the picture each with a single rule in each one. Each rule then has a tag inside of it. That is the output I am shooting for.

Upvotes: 0

Views: 69

Answers (1)

btm1
btm1

Reputation: 3856

I would create scope arrays for rules and groups and use ng-repeat to repeat my directive tag as needed.

i.e.

<group ng-repeat="group in groups">
   <rule ng-repeat="rule in group.rules></rule>
</group>

where group is an array of objects where each object(group) has a property rules which is an array of objects(rule)

Upvotes: 1

Related Questions