Question

尝试使用带有链接到文本字段的输出的自定义指令时，问题

[$ compile：tplrt]指令'myDir'的模板必须只有一个根元素。 http://errors.angularjs.org/1.5.0/ $ compile / tplrt？p0 = myDir＆amp; p1 =可以一个人在这里展示了一些亮点

代码

<!DOCTYPE html>
<html ng-app="myapp1">

<head>
    <title> ANGULAR</title>
    <script src="angular.min.js"></script>
    <script type="text/javascript">
        angular.module('myapp1', []).directive('myDir', function() {
            return {
                restrict: 'E',
                replace: true,
                template: '<input type="text" ng-model="title"> {{title}}'
            };
        });
    </script>
</head>

<body>
    <div>
        <my-dir>sadas</my-dir>
    </div>
</body>

</html>

Answer 1

错误消息很明显我猜你的模板应该是这样的：

<div><input type="text" ng-model="title"> {{title}}</div>

而不只是：

<input type="text" ng-model="title"> {{title}}

Answer 2

顺便说一下，您设置了已弃用的指令replace:true 。由于您要替换元素，因此您的模板应编译为单个根。

如果删除replace属性，则可以使用现在的模板。 Demo

   directive('myDir', function() {
        return {
            restrict: 'E', 
            // don't use deprecated option replace: true
            template: '<input type="text" ng-model="title"> {{title}}'
        };
    });

Answer 3

当使用template（或templateUrl）声明指令并替换mode on时，模板必须只有一个根元素。也就是说，模板属性的文本或templateUrl引用的内容必须包含在单个html元素中。

例如，

<p>blah <em>blah</em> blah</p> instead of simply blah <em>blah</em> blah

否则，替换操作将导致单个元素（指令）被多个元素或节点替换，这在实践中不受支持且通常不需要。

https://docs.angularjs.org/error/ $编译/ tplrt

使用ng-model时无法使用自定义指令

3 个答案: