angularJS指令具有隔離範圍，屬性綁定不起作用

請參見本文的jsfiddle：http://jsfiddle.net/viro/DK5pC/3/angularJS指令具有隔離範圍，屬性綁定不起作用

相比，我已經找到了教程和回覆我所做的看起來正確，所以我敢肯定，我俯瞰一些微不足道的東西。

我試圖做一個html元素上的指令，這將創建一個兄弟div來顯示與原始元素相關的消息。

例如，對於這個網站：

<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 
    }; 
});

好，不工作，我想不通爲什麼。

來源

2013-12-12 David V.

你需要$compile要添加到DOM的模板。角一直沒有機會到ng-bind指令添加它的處理程序，例如對DOM的一部分。

因此而不是隻加入這樣的元素：

element.parent().append(template);

這些步驟將讓角處理您的模板，然後添加它。

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

Updated fiddle

來源

2013-12-12 16:38:17 KayakDave

問題：你爲什麼要修改的範圍對象{tstMsg： '= tstMsg'}？我認爲只是'='它會起作用。 –

良好的結果 - 簡短的答案是肯定的，只有等號很好'{tstMsg：'='}'。背景是在你的鏈接提琴'tstBubble：'=''我切換到'tstBubble：'= tstMsg''。然後，我看到用'tstMsg'，而不是你的帖子'tstBubble'所以我換了名稱的代碼以匹配您的文章，但使用全局搜索和替換。 – KayakDave

啊，沒有注意到。發佈鏈接之前，我認爲我已將其重命名爲tstMsg。 –

angularJS指令具有隔離範圍，屬性綁定不起作用

回答

相關問題