具有隔离范围的 angularJS 指令，属性绑定(bind)不起作用

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>

我希望 div 范围内的 tstMsg 能够绑定(bind)到输入范围内的 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

您需要$compile要添加到 DOM 的模板。 Angular 还没有机会添加它的处理程序，例如 ng-bind 指令到 dom 的该部分。

因此，不要只添加这样的元素:

element.parent().append(template);

这些步骤将让 Angular 处理您的模板，然后添加它。

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

Updated fiddle