2014-11-20 57 views
0

我有一个指令可以在其中包含一些HTML。我怎么才能得到它?我已经尝试链接和编译,但我正在获取模板中定义的HTML。这是我的观点:在指令声明中获取HTML

<my-directive ng-model="ctrl.SomeField"> 
    <p> This is the HTML I want! <p> 
</my-directive> 

这里是我的指令:

return { 
    restrict: 'E', 
    scope: { 
    ngModel: "=" 
    }, 
    template: "<p>This is the HTML that is being returned from compile and link!</p>" + 
      "<p>This is not the HTML that I want!</p>" 
    link: { 
    pre: function preLink(scope, element, attrs) { 
     var html = element.html(); //returns the html in the directive template 
    }, 
    post: function postLink(scope, element, attrs) { 
     var html = element.html(); //returns the html in the directive template 
    } 
    }, 
    compile: function(element, attrs){ 
     var html = element.html(); //returns the html in the directive template 
    } 
} 

我如何从我的观点得到了HTML而不是从我的指令模板?

编辑:下面是一个例子 - http://plnkr.co/edit/z6gFOrGG01jKoKwISHcW?p=preview

+0

试图用等的console.log(element.find( 'P'));在链接块 – Whisher 2014-11-20 19:56:24

+0

不起作用,仍然返回我不想要的HTML。 – gwin003 2014-11-20 20:11:29

+0

https://gist.github.com/whisher/3733e1f67e63c798952a它的工作原理console.log打印这是我想要的HTML! – Whisher 2014-11-20 20:20:21

回答

0

这里是我的解决方案! http://plnkr.co/edit/OlRyBN1I0jCkAREIKVeC?p=preview。基本上我只需要使用另一个指令在链接步骤中做一些奇特的变形包装材料。

这里是指令:

function returnFn() { 
    return { 
     link: { 
      pre: function (scope, element, attr, ctrl, transclude) { 
       if (transclude) { 
        transclude(scope, function (clone) { 
         element.append(clone); 
        }); 
       } 
      } 
     } 
    } 
} 

return [returnFn];