指令模板内的角度数​​据绑定

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

然而，它会显示＆＃39; {{name}}＆＃39;而不是输入到输入字段中的值。

如果我将此输入字段复制到指令之外，则可以正常工作。

在指令模板中涉及数据绑定时，我是否遗漏了什么？

编辑：

行。我错过了一件事，因为我没有认为这是相关的，这是我的指示：

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

原因是我需要触发一个控制template.html中元素的Jquery函数。

删除此功能可解决此问题，但我的模板中没有javascript可用。

在编译时是否有一种在指令模板中调用函数的简单方法？

Answer 1

可能您会收到错误preg_match('/\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b/si',$text, $matches); 。

你有两种方法可以解决这个问题。

1. 从指令定义中删除Error: [$compile:tplrt] Template for directive 'myDirective' must have exactly one root element. ......
2. 为模板添加根元素@Andrea Ghidini的回答

这是DEMO

Answer 2

如果您看到{{name}}因为您在JS中有错误，请在浏览器开发者工具中查找错误消息。

在你的情况下问题是模板：它必须包含一个单独的html元素（link to docs），所以你必须输入如下内容：

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