Pass params in ng-include

Question

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 common 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.

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

score 7 · Accepted Answer · answered Jul 23 '15 at 07:11

7

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>

answered Jul 23 '15 at 07:11

Cerbrus

70,800
18
132
147

1

You *could* put an `ng-controller` or `ng-init` on the same element as the `ng-include`, but a directive would be better. – Mosho Jul 23 '15 at 07:19
1

This worked when I wrapped the custom attributes in single quotes. like this: `pass="'parentScopeObject'" some="'Literal string'" properties="'parentScopeSomething'"`. Thanks!! – Mr_Green Jul 23 '15 at 08:43
1

@Mr_Green: For strings you need to use "@", then you don't need the extra quotes. Basically, `"@"` will literally take the contents of the passed parameter, and `"="` will interpret the argument as a variable name in the parent scope. [This question explains that quite well.](http://stackoverflow.com/questions/21712147/differences-among-in-angular-directive-scope) – Cerbrus Jul 23 '15 at 08:46

Pass params in ng-include

1 Answers1