How can I include HTML into a page with AngularJS from an HTML file?

Question

I have some code that I have taken over. It looks like this:

<div id="init"
     data-admin-template
     ng-show="ss.display.init"
     data-template-url="init.html">
</div>

There's a directive adminTemplate:

app.directive('adminTemplate', ['stateService', function (stateService) {
    return {
        restrict: 'A',
        templateUrl: function (elem, attrs) {
            return "/Content/app/admin/templates/" + attrs.templateUrl;
        },
        link: function (scope, element, attrs) {
            scope.stateService = stateService;
        }
    };
}]);

I am not very familiar with templates and it seems that this directive does not really do much. Is there a way I can do this without the directive?

What's the wider context? Does this sit on a single page or is it a reusable component that needs to be configurable? — james
– james, Commented Nov 29, 2014 at 11:24
It's a resuable component but could the same be done without a directive? — Samantha J T Star
– Samantha J T Star, Commented Nov 29, 2014 at 11:31
What about just using ng-include ? docs.angularjs.org/api/ng/directive/ngInclude — Oli
– Oli, Commented Nov 29, 2014 at 11:43
Where does the property ss for ss.display.init get set? Is it a $scope variable or a separate controller? — james
– james, Commented Nov 29, 2014 at 12:29

james · Accepted Answer · 2014-11-29 12:47:07Z

As @Oli said in the comments, ng-include is definitely one solution. There are others as well - angular likes to offer you just enough options to leave you doubting yourself - but i'm wondering what you'd actually gain by changing it.

With ng-include you'd need to add a controller to to your html, to supply stateService (if you don't do it here, you'd have to add it to every different admin template). So you'd end up with:

<div id="init"
     ng-include="/Content/app/admin/templates/init.html"
     ng-show="ss.display.init"
     ng-controller="AdminController">
</div>

So you end up with the same amount of attributes, you need the whole template path and it becomes less readable. Looking at what you have now, it's clear to see the intent.

You could also go one step further and give it the flexibility of being an element or attribute

<admin-template
    id="init"
    ng-show="ss.display.init"
    data-template-url="init.html">
</admin-template>


app.directive('adminTemplate', ['stateService', function (stateService) {
    return {
        restrict: 'EA',
        templateUrl: function (elem, attrs) {
            return "/Content/app/admin/templates/" + attrs.templateUrl;
        },
        link: function (scope, element, attrs) {
            scope.stateService = stateService;
        }
    };
}]);

It may appear to be doing very little, but my feeling is that the previous developer has refactored out repetition, to get to this little directive. I'd argue that as it is it removes boiler plate, allows easy re-usability and communicates intent well in your mark up.

Collectives™ on Stack Overflow

How can I include HTML into a page with AngularJS from an HTML file?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related