指令模板內的角度數​​據綁定

Question

我試圖讓簡單的數據綁定在Angular設置中的指令模板內工作。

我目前有：

app.directive('myDirective', function() {
return {
    replace: true,
    restrict: 'E',  
    templateUrl: "/app/partials/template.html"
}
});

在我的template.html中，我有一個簡單的輸入字段，如下所示：

<input type="text" ng-model="name" /> 
My name is {{name}}

但是，它會顯示“ {{name}} ”而不是輸入字段中輸入的值。

如果我將此輸入字段復制到指令之外，則可以正常工作。

在指令模板中涉及數據綁定時，我是否遺漏了一些東西？

編輯：

好。 我錯過了一件事，因為我不認為這是相關的，這是我的指令：

compile:function(){
        return function link(scope,element){
            // Call a function
            steps();
         }
    }

原因是我需要觸發一個控制template.html中元素的Jquery函數。

刪除此功能可解決此問題，但我的模板中沒有javascript可用。

在編譯時是否有一種在指令模板中調用函數的簡單方法？

Answer 1

可能你會得到一個錯誤說Error: [$compile:tplrt] Template for directive 'myDirective' must have exactly one root element. ...... Error: [$compile:tplrt] Template for directive 'myDirective' must have exactly one root element. ......

你有兩個選擇來解決這個問題。

1. 從指令定義中刪除replace: true
2. 為@Andrea Ghidini的答案添加模板的根元素

這是DEMO

Answer 2

如果您看到{{name}}那是因為您在JS中有錯誤，請在瀏覽器開發人員工具中查找錯誤消息。

在你的情況下，問題是模板：它必須包含一個單獨的html元素（ 鏈接到docs ），所以你必須輸入如下內容：

<div>
  <input type="text" ng-model="name" /> 
  My name is {{name}}
</div>