I am new to angularjs. I have a requirement where I am using a same radio button again and again in each partial html. So, I want to make it as a mon template and use it in other partial templates.

<ng-include src="'partial-htmls/toolbox/radio-button.html'"></ng-include>

Which shows the radio button as follows:

Sex :    O Male
         O Female

This is fine but I need to change the label, text and number of radio buttons somehow in the ng-include. (which I am thinking to do by passing params somehow)

I am from background of lodash, where it can be easily handled. I thought there might be a way in angular too.

Please help.

I am new to angularjs. I have a requirement where I am using a same radio button again and again in each partial html. So, I want to make it as a mon template and use it in other partial templates.

<ng-include src="'partial-htmls/toolbox/radio-button.html'"></ng-include>

Which shows the radio button as follows:

Sex :    O Male
         O Female

This is fine but I need to change the label, text and number of radio buttons somehow in the ng-include. (which I am thinking to do by passing params somehow)

I am from background of lodash, where it can be easily handled. I thought there might be a way in angular too.

Please help.

• javascript
• html
• angularjs
• templates

• That looks like an odd usage of ng-include. Why not nested controller? – Amit Commented Jul 23, 2015 at 7:11
• @Amit I thought I should use ng-include please suggest me what is the best way to handle this. – Mr_Green Commented Jul 23, 2015 at 7:15

1 Answer 1

There is no way to pass parameters to an ng-include.
It does have access to the same scope as the HTML it's in, though.

If you need to be able to pass different parameters, you're going to have to use a directive:

angular.module("myModule")
.directive('radioButton', [function () {
    return {
        restrict: 'E',
        scope: {
            pass: "=",
            some: "@",
            properties: "="
        },
        templateUrl: 'app/directives/views/radio-row.html',
        controller: ["$scope", function ($scope) {
            // Isolated $scope here
        }]
    };
}]);

<radio-button pass="parentScopeObject" some="Literal string" properties="parentScopeSomething"></radio-button>