Question

我正在尝试添加动态模板并遇到transclude问题。

这是动态模板功能：

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

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

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中找不到角度脚本的路径。更改为<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>，我看到错误“angular.js：13920TypeError：transclude不是函数...”

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 CODE：

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指令并转换

2 个答案: