Angularjs 带有动态模板和嵌入的指令

Question

我正在尝试添加动态模板，但遇到了嵌入问题。

这是动态模板函数：

var getTemplate = function(contentType){
      var template = '<button style="cursor: pointer;">' + contentType + '<ng-transclude></ng-transclude></button>'
      return template;
    };

这是调用动态模板和更新嵌入的代码：

element.html(getTemplate(attr.firstname));

transclude($scope.$parent, function (clone, $scope) {
          element.children().append(clone);
        });

在此处查看完整代码 https://plnkr.co/edit/cQBeiDkEb8KwhrFWb8iR?p=preview

查看控制台我看到这条通知：angular.js:13920TypeError: transclude 不是函数

应包括结果：Go 按钮。

转到此处的按钮代码：

<my-button firstname="John"><button style="cursor: pointer;"><i style="color: green;">Go</i></button></my-button>

请帮我解决一下。

这是我使用的文档：docs

非常感谢。

Answer 1

在 plunkr 中找不到 angular 脚本的路径。更改为 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>，我看到错误 "angular.js:13920TypeError: transclude is not a function ..."

Answer 2

我已经解决了这个问题。

这是新的示例代码： HTML代码：

<div ng-controller="MyCtrl">
<my-directive title="nguyen hai dang">
<button>some button</button>
<a href="#">and a link</a>
</my-directive>
</div>

JS 代码：

var myApp = angular.module("myApp",[]);

function MyCtrl($scope) {
    $scope.log=[];
}

myApp.directive("myDirective", function(){
    return{
    restrict: "E",
    replace: true,
        transclude: true,
    scope: {
            title: "@"
          },
        template: "<div class=\"something\" ng-transclude>{{title}} </div>"
    };
});

在此处检查代码enter link description here

Angularjs 带有动态模板和嵌入的指令

Angularjs directive with dynamic template and transclude

angularjs

angularjs-directive

angular-template

angular-directive

angularjs-ng-transclude