Каковы будут результаты этой простой программы и почему? - PullRequest
Новая
       8

Каковы будут результаты этой простой программы и почему?

0 голосов
/ 04 сентября 2018 

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

Какой шаблон будет возвращен? У меня есть два сценария: какой будет называться и почему?

Ответы [ 2 ]

0 голосов
/ 05 сентября 2018

Удалите множественное определение модуля приложения, который удаляет первую директиву для определения приложения. 

<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>
0 голосов
/ 04 сентября 2018

Удалите второй параметр во втором вызове angular.module, и он будет работать так, как вы ожидали. См. документы для второго параметра: 

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