Home/ Questions/Q 8652137
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T14:14:20+00:00

I have a plunker here that demostrates it . I can create two directives.

  • 0

I have a plunker here that demostrates it.

I can create two directives. In this case one is named zMonthSelect, and the other is named zTest that references zMonthSelect. Angular doesn’t seem to like if they’re nested. Why is that? What can I do to fix it?

Here’s the code:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
});

app.directive('zMonthSelect', function () {
    return {
        restrict: 'E',
        priority: 1000,
        scope: {
            month: '=month'
        },
        template: '<select ng-model="month">' +
            '<option value="1">Jan</option>' +
            '<option value="2">Feb</option>' +
            '<option value="3">Mar</option>' +
            '<option value="4">Apr</option>' +
            '<option value="5">May</option>' +
            '<option value="6">Jun</option>' +
            '<option value="7">Jul</option>' +
            '<option value="8">Aug</option>' +
            '<option value="9">Sep</option>' +
            '<option value="10">Oct</option>' +
            '<option value="11">Nov</option>' +
            '<option value="12">Dec</option>' +
            '</select>',
        controller: function($scope) {
        }
    };
});


app.directive('zTest', function(){ 
  return { 
    restrict: 'E',
    priority: 1,
    scope: {},
    template: 'Test: <z-month-list month="1"></z-month-list>',
    controller: function($scope) {
    }
  };
});

and the HTML:

<body ng-controller="MainCtrl">
  zTest: <z-test></z-test><br/>
  zMonthSelect: <z-month-select></z-month-select><br/>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have a mismatch in your directive name. In the zTest directive you’re trying to use <z-month-list>, but your directive is named zMonthSelect. Just change your zTest directive to us <z-month-select>. See http://plnkr.co/edit/x2i8lv?p=preview

    Or you can rename your inner directive to zMonthList. See http://plnkr.co/edit/aQlSqK?p=preview

    • 0