尽管只添加了一个指令，但多个指令错误

Posted 2023-03-13

技术标签:

【中文标题】尽管只添加了一个指令，但多个指令错误【英文标题】：Multiple directives error though there is only one added 【发布时间】：2016-10-30 00:58:35 【问题描述】：

创建指令时出现以下错误。

我收到以下错误

13642 错误：[$compile:multidir] 多个指令 [myDirective (module: myApp), myDirective (module: myApp)] 要求模板：

我是指令创建的新手。你能解释一下吗-

虽然我只使用一个指令，但它是在说多个指令。这里还有哪些其他指令？如何解决此错误？

更新

删除templateUrl后，错误消失了。但该值未呈现。正如答案中提到的，这是因为创建了isolated scope 而不是shared scope。

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-resource.js"></script>
    
    <script type="text/javascript">
        //defining module
        var app = angular.module('myApp', ['ngResource']);

        //defining controller
        app.controller('myController', function ($scope) 
	
            $scope.myVal = 'A';

        );

 app.directive('myDirective', function () 

    return 
        restrict: 'EA',      
        scope: title: '@' ,
        template: '<div> myVal </div>',
        templateUrl: 'mytemplate.html',
        link: function ($scope, element, attrs)   
    
);


    </script>
</head>
<body ng-app="myApp">
    <div ng-controller="myController">
       <div my-directive></div>
    </div>
</body>
</html>

【问题讨论】：

为什么要有模板和templateUrl？应该只需要一个或另一个。读取错误页面（所有内容）。它用清晰的英语解释了为什么。 docs.angularjs.org/error/$compile/… @dfsq 我刚读过。不过，它并没有说一个带有多个模板的指令会导致这个问题。 【参考方案1】：

您正在尝试为同一个指令（template 和 templateUrl）定义两个模板。删除一个或另一个，它将解决您的错误

编辑：

当您在指令中指定本地范围时，您正在创建一个隔离范围。 This 是了解更多关于 Angular 指令范围的好资源

【讨论】：

删除了templateURL，错误消失了。但它没有显示来自控制器的值 - myVal。知道为什么吗？【参考方案2】：

当您不小心定义了两个具有相同名称的指令/组件时，可能会发生类似的错误。然后 Angular 会尝试将两者都应用到元素上，错误会显示相同的名称，而实际上它们是不同的指令。

【讨论】：

以上是关于尽管只添加了一个指令，但多个指令错误的主要内容，如果未能解决你的问题，请参考以下文章

Angular 属性指令 - prod 构建错误，预期 1 个参数但得到 0

错误多个指令 [bar, bar] 在使用自定义指令和 angular-bootstrap 时要求模板