CODEWITHSUNDEEP
angularjs
abhishek
abhishek

Reputation: 149

How to embed an html page using angular directive

I am creating an angular.js application. I have written a html page and wants to put it under div using directive

 <div data-(<directive-name)>
</div>

DxPDictionary.directive('import', [function () {
        return {
            restrict: 'A',
            templateUrl: 'template/Import.html',
            scope: false,
        }

It's not working, is this approch is right or should use another way to achieve this

Upvotes: 2

Views: 1584

Answers (3)

Yang Zhang
Yang Zhang

Reputation: 4570

There is already a directive for this purpose. You do not need to create your own.

https://docs.angularjs.org/api/ng/directive/ngBindHtml

Ashley's answer is good if you keep your html in a file. If you dynamically generate your html, you can use ng-bind-html directive.

Upvotes: 0

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

use like this.

 <div data-directive-name>
</div>

DxPDictionary.directive('dataDirectiveName', [function () {
        return {
            restrict: 'A',
            templateUrl: 'template/Import.html',
            scope: false,
        }

your directive name dataDirectiveName in directive definition in camel case format and directive name data-directive-name on DOM should match.

You can use ng-include if you are not creating reusable components using directive and want use is as only html of the page.

Upvotes: 0

Developer
Developer

Reputation: 1437

<body ng-controller="userCtrl">

    <div class="container">
        <div ng-include="'myUsersList.html'"></div>
        <div ng-include="'myUsersForm.html'"></div>
    </div>

</body>

Upvotes: 2

Related Questions