Question

我试着做指令，其中包含动态模板，但有一个问题 - 编译后所有属性，包括ng-model，都没有翻译成新元素，ng-model没有工作。我哪里错了？

元素代码：

<input type-test="kendo">

指令：

    App.directive('typeTest', ['$templateCache', '$compile', '$http', 'Formatter',
        function ($templateCache, $compile, $http, Formatter) {
            return {
                restrict: 'A',
                scope: {
                    ngModel: '='
                },
                replace: true,
                link: function(scope, element, attrs) {
                    $http.get(Formatter.getTemplateUrl(attrs.typeTest), {cache: $templateCache}).success(function(tplContent) {
                        var el = $compile(tplContent)(scope);
                        element.replaceWith(el);
                    });
                }
            }
        }
    ]);

Formatter.getTemplateUrl（）根据输入参数（attrs.typeTest）返回模板的url。

模板到type-test =＆＃34; kendo＆＃34;：

<input type="text" kendo-drop-down-list k-data-source="list" k-data-text-field="'Name'" k-data-value-field="'Id'">

列表定义为[{Id：1，姓名：＆＃39; First＆＃39;}，{Id：2，姓名：＆＃39; Second＆＃39;}]。

Answer 1

您不应该替换指令的链接功能中的元素。链接函数应该只设置事件监听器以使指令工作。将您的逻辑放在编译函数中而不是链接函数中。这是一篇非常好的文章：http://amitgharat.wordpress.com/2013/06/08/the-hitchhikers-guide-to-the-directive/

Answer 2

我找到了解决方案：

    App.directive('dynamicType', ['$compile',
        function ($compile) {
            return {
                compile: function compile(tElement, tAttrs, transclude) {
              return {
                pre: function preLink(scope, iElement, iAttrs, controller) { 
                            var tpl = "<input type-test='"+iAttrs.dynamicType+"'>";
                            iElement.html(tpl);
                            $compile(iElement.contents())(scope);
                 },
                post: function postLink(scope, iElement, iAttrs, controller) {}
              }
                }
            }
        }
    ]);

该指令编译新元素，然后将其链接并在返回控制之后转换为typeTest指令 - 以编译和链接其他元素。

元素：

<input dynamic-type="kendo">

使用jQuery替换元素后，指令不会转换属性

2 个答案: