Question

我正在创建一个angular.js应用程序。我写了一个html页面，并希望使用指令

将其放在div下

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

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

这不起作用，这个approch是对的还是应该用另一种方式来实现这个

Answer 1

<body ng-controller="userCtrl">

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

</body>

Answer 2

像这样使用。

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

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

您的指令名称 dataDirectiveName 在camel案例格式的指令定义中，指令名称 data-directive-name 在DOM上应该匹配。

如果您没有使用指令创建可重用组件，并且希望使用仅作为页面的html，则可以使用ng-include。

Answer 3

已有针对此目的的指令。您无需创建自己的。

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

如果你把你的html保存在文件中，Ashley的回答是好的。如果动态生成html，则可以使用ng-bind-html指令。

如何使用angular指令嵌入html页面

3 个答案: