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在输入范围内与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

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

1 个答案: