CODEWITHSUNDEEP
angularjs
Display Name
Display Name

Reputation: 318

Custom Directive, how to pass parameter to template

Let's try this over again. I'm creating a directive (coolDirective) that inserts a textbox. In this directive, I am applying a second directive to the textbox that expects certain elements such as minDate. This is just an example of what I'm looking for, the full solution is much more complicated.

Here is my HTML:

<cool-directive id="cool" ng-model="vm.cool min-date="vm.date" />

Here is my directive that changes cool-directive to a textbox:

app.directive('coolDirective', ["$compile", function ($compile) {
              return {
                  restrict: "A",
                  replace: true,
                  template: function (elem, attrs) { return "<div><input date-validator type=\"text\" minDate="{{minDate}}"/></div>" },
                  scope: {
                      ngModel: "=",
                      minDate: "=minDate"
                  },
                  require: ["ngModel"],
                  link: function (scope, element, attrs, ctrl) {
    }
}

Here is the Directive that is applied to the inserted textbox.

app.directive('dateValidator', function () {
        return {
            restrict: "E",
            scope: {
                ngModel: "=",
                minDate: "="
            },
            require: 'ngModel',
            link: function (scope, element, attrs, modelCtrl) {
    }
}

How to I pass the angular variable mindate from HTML to Directive to Directive?

Upvotes: 1

Views: 3301

Answers (1)

Kjell Ivar
Kjell Ivar

Reputation: 1164

Iwould think this would do the trick? I removed the {{}} from your coolDirective template. As you want to pass on the variable to the next directive. Also changed minDate attribute in template to min-date.

app.directive('coolDirective', ["$compile", function ($compile) {
    return {
        restrict: "A",
        replace: true,
        template: function (elem, attrs) {
            return '<div><input date-validator type="text" min-date="minDate"/></div>'
        },
        scope: {
            ngModel: "=",
            minDate: "="
        },
        require: ["ngModel"],
        link: function (scope, element, attrs, ctrl) {}
    }
});

app.directive('dateValidator', function () {
    return {
        restrict: "E",
        scope: {
            ngModel: "=",
            minDate: "="
        },
        require: 'ngModel',
        link: function (scope, element, attrs, modelCtrl) {
            console.log(scope.minDate);
        }
    }
});

Personally it's unclear to me why you want to use ngModel in this way, I would just use a custom parameter for inputting my variable. But it may be something I'm missing since I don't know what the code is supposed to do, other than replacing something with a text input :)

Upvotes: 2

Related Questions