这个简单程序的输出是什么，为什么？

Question

<div ng-app="myApp">
    <div w3-test-directive></div>
    <div w3-test-directivee ></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>

<script>
    var app = angular.module("myApp", []);
    app.directive("w3TestDirective", function() {
        return {
            template : "howw!"
        };
    });
</script>
<script>
    var app = angular.module("myApp", []);
    app.directive("w3TestDirectivee", function() {
        return {
            template : "hie how are you!"
        };
    });
</script>

返回哪个模板？我有两个脚本：将调用哪一个以及为什么？

Answer 1

在第二个 angular.module 调用中删除第二个参数，它将按您预期的那样工作。第二个参数见docs：

If specified then new module is being created. If unspecified then the module is being retrieved for further configuration.

由于您提供了第二个参数，每次覆盖之前定义的内容时都会创建一个新的 myApp 模块。

<div ng-app="myApp">
    <div w3-test-directive></div>
    <div w3-test-directivee ></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>

<script>
    var app = angular.module("myApp", []);
    app.directive("w3TestDirective", function() {
        return {
            template : "howw!"
        };
    });
</script>
<script>
    var app = angular.module("myApp");
    app.directive("w3TestDirectivee", function() {
        return {
            template : "hie how are you!"
        };
    });
</script>

Answer 2

移除app模块的多重定义，即移除定义app的第一个指令。

<div ng-app="myApp">
    <div w3-test-directive></div>
    <div w3-test-directivee></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>

<script>
    var app = angular.module("myApp", []);
    app.directive("w3TestDirective", function () {
        alert("w3TestDirective called");
        return {
            template: "howw!"
        };
    });
</script>
<script>
   // var app = angular.module("myApp", []);
    app.directive("w3TestDirectivee", function () {
        alert("w3TestDirectivee called");
        return {
            template: "hie how are you!"
        };
    });
</script>

这个简单程序的输出是什么，为什么？

What will be the output of this simple program and why?

angularjs

angularjs-directive