Question

我想创建一个自定义指令，将其他自定义指令包装成动态插入到包装器的模板中。但我找不到合适的方法来做到这一点。到目前为止，我已经提出了以下解决方案，但遗憾的是无法解决这个问题。

angular.module('myApp', [])
    .directive('contentDir', function () {
        return {
            restrict: 'E',
            replace: true,
            template: '<div><b>Content is here</b></div>'
        };
    })
    .directive('wrapperDir', function () {
        return {
            restrict: 'E',
            scope: {
                htmlContent: '@htmlContent',
            },
            replace: true,
            controller: function($scope, $sce){
                $scope.sContent = $sce.trustAsHtml($scope.htmlContent);
            },
            template: '<div>This is a wrapper for the... <span ng-bind-html="sContent"></span>!</div>'
        };
    })
;

// HTML

<wrapper-dir html-content="<content-dir></content-dir>"></wrapper-dir>

wrapper-dir指令不生成html。任何人都能解释我做错了什么以及做正确的方法吗？

Answer 1

你可以在wrapperDir上使用transclude然后你可以在html使用所需的内部html /指令：

    .directive('wrapperDir', function () {
    return {
    restrict: 'E',
        scope: {
        },
        replace: true,
        transclude: true,
        controller: function($scope, $sce){

        },
        template: '<div>This is a wrapper for the... <span ng-transclude></span>!</div>'
        };
    });

在html：

<wrapper-dir><content-dir></content-dir></wrapper-dir>

Answer 2

对于$ compile，我在你的例子中使用了类似的代码：

yourApp.directive('compileBindedHtml', ['$compile', function($compile) {
return {
    restrict: 'A', // only activate on element attribute
    link: function(scope, elem, attrs) {
        scope.$watch(attrs.compileBindedHtml, function(newValue, oldValue) {
            if (newValue) {
                elem.html(newValue);
                $compile(elem.contents())(scope);
            }
        });
    }
}
}]);

然后在代码中：

<div compile-binded-html="titleHtml"></div>

其中titleHtml是包含html / angular模板代码的变量。

在你的例子中，应该只缺少部分：

$compile(elem.contents())(scope);

编译元素的内容以解析角度模板并与范围绑定。

也许这会特别回答你的问题。

Answer 3

但是你不能简单地在wrapperDir中包装contentDir，就像那样：

.directive('wrapperDir', function () {
    return {
        ...
        template: '<div><span>This is a wrapper for the... </span><span><content-dir></content-dir></span><span>!</span></div>'
    };
})

然后只使用：

<wrapper-dir></wrapper-dir>

如何创建一个自定义指令，将其他自定义指令包装成动态插入到包装器的模板中？

3 个答案: