Angular Directives - 如何将属性设置为 innerHML

Question

如何为内部 HTML 设置属性

tpl.html

<div class="my-templeate"></div>

HTML

<template></template>

指令

app.directive('template', ['$compile', function($compile) {
        return {
            restrict: "EA",
            templateUrl: './tpl.html',
            link: function($scope, $elm, $attr) {

                var elm =$elm[0].innerHTML;

                elm.attr('id', "someId");
            }
        };
    }]);

这里我想将属性设置为附加到<template></template> 元素的innerHtml <div class="my-templeate"></div>。

我该怎么做？

Answer 1

只要你有这个庞大而强大的框架供你使用，你也可以利用它。在范围内设置数据并让模板读取它，而不是绕过 Angular 自行编辑 DOM。模板：

<div class="my-template" id="{{someId}}"></div>

指令：

app.directive('template', ['$compile', function($compile) { // $compile is unnecessary here unless you're using it for something else in this directive
    return {
        templateUrl: './tpl.html',
        link: function($scope, $elm, $attr) {
            $scope.someId = "whatever";
        }
    };
}]);

一般来说，如果您在使用 Angular 时直接操作 DOM，那么您可能会以困难的方式或完全错误的方式做事。