0

I tried to do directive, which include template on the fly, but there is one problem - after compile all attributes, including ng-model, aren't translate to new element and ng-model doesn't working. Where I'm wrong?

Element code:

<input type-test="kendo">

Directive:

    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() returns a url to template depend on input argument (attrs.typeTest).

Template to type-test="kendo":

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

List is defined like [{Id: 1, Name: 'First'}, {Id: 2, Name: 'Second'}].

4

2 回答 2

0

我找到了解决方案：

    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">
于 2014-04-02T06:59:51.217 回答
0

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

于 2014-03-31T07:58:03.320 回答