angularJS директива с изолированной сферой, атрибут привязки не работает

Question

Пожалуйста, смотрите эту jsfiddle: http://jsfiddle.net/viro/DK5pC/3/

Что я сделал выглядит правильно по сравнению с обучающими программами и ответов, которые я нашел, так что я уверен, что я с видом что-то тривиальное.

Я пытаюсь сделать директиву над элементом html, который создаст дочерний div для отображения сообщения, связанного с исходным элементом.

, например, для этого HTML:

<input ng-model="inp" tst-msg="message" /> 

Я хотел бы создать в качестве родственного элемента:

<div class="msg">Msg:<span ng-bind="tstMsg"></span></div> 

Я надеялся, что tstMsg в области видимости Див был бы быть связан с message в входной-х объем.

Вот что директива выглядит следующим образом:

angular.module('tst', []) 
.directive('tstMsg', function(){ 
    var template = "<div class='msg' >Msg:<span ng-bind='tstMsg'></span></div>"; 

    var link = function(scope,element,attrs) { 
     element.parent().append(template); 
     console.log("link called"); 
    }; 

    return { 
     restrict: 'A', 
     scope: { 
      tstMsg: '=' 
     }, 
     link: link 
    }; 
}); 

Ну что не работает, и я не могу понять, почему.

Answer 1

Вам необходимо добавить код, который вы добавили в DOM. Угловой не было возможности добавить его обработчиков, например, директиву ng-bind в ту часть дома.

Так вместо того, чтобы просто добавить элемент, как это:

element.parent().append(template); 

Эти шаги позволят угловой отросток шаблон, а затем добавить его.

newe = angular.element(template); 
$compile(newe)(scope); 
element.parent().append(newe); 

Updated fiddle