Блог

Главная - Вопросы по программированию - Странная ошибка AngularJS при создании простой директивы

Странная ошибка AngularJS при создании простой директивы

#javascript #html #angularjs #angularjs-directive

#javascript #HTML #angularjs #angularjs-директива

Вопрос:

Я пытаюсь создать простую директиву в AngularJS и не понимаю, почему приведенный ниже код выдает следующую ошибку:

 Error: [$compile:tplrt] http://errors.angularjs.org/undefined/$compile/tplrt?p0=taWithMessageamp;p1=customButton.html

код:

 <!doctype html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>

    <script>

    var app = angular.module('aaa', []);

    app.directive("taWithMessage",function() {
        return {
            templateUrl: "customButton.html",
            replace: true
            };
        }

    );    

    </script>

  </head>
  <body>

    <div ng-app="aaa">

    <script type="text/ng-template" id="customButton.html">

        <p>blah <em>blah<em>blah</em></em> blahHello, 
        <h2>kkk</h2>
        <input type="text" placeholder="Enter a name here" ng-keypress="valid=true"/></p>

    </script> 

        <form>

        <div ta-with-message></div>

            <input type="submit">

        </form>
    </div>
  </body>
</html>

Чего я не понимаю, так это того, что это работает, когда я заменяю h2 , скажем span , например:

 <p>blah <em>blah<em>blah</em></em> blahHello, 
<span>kkk</span>
<input type="text" placeholder="Enter a name here" ng-keypress="valid=true"/></p>

Имеет ли это какое-то отношение display к элементу? Почему это происходит и как мне это исправить?

Ответ №1:

Эта страница ссылки на ошибку AngularJS должна вам помочь:

Дальнейшее объяснение

Автоматически закрывающийся <p> тег

Первый (нерабочий) пример, о котором идет речь, содержит небольшую ошибку разметки HTML.

Почему? Потому <p> что позволяет только формулировать содержимое внутри него. Теги заголовков не формулируют содержимое. Когда браузер видит внутри тег, не содержащий фраз (например, заголовок) <p> , он неявно добавляет </p> .

Не указывать </p> before <h2> не является ошибкой, это разрешено спецификациями HTML:

Конечный тег может быть опущен, если за <p> элементом сразу следует <address> , <article> , … <h1> , <h2> , <h3> , … или другой <p> элемент, или если в родительском элементе больше нет содержимого, а родительский элемент не является <a> элементом.

Но, в конце концов, первый рассматриваемый пример интерпретируется браузером следующим образом:

     <p>blah <em>blah<em>blah</em></em> blahHello,</p> 
    <h2>kkk</h2>
    <input type="text" placeholder="Enter a name here" ng-keypress="valid=true"/>

Обратите внимание, как </p> изменилась его позиция с after <input> на before <h2> .

Несовместимый шаблон директивы

Это делает такой шаблон директивы несовместимым, поскольку тогда он имеет более одного корневого элемента. Согласно документам AngularJS, связанным выше, ваш шаблон директивы должен содержать все его содержимое внутри одного тега верхнего уровня. Однако в вашем первом примере после интерпретации браузером оказывается три тега верхнего уровня.

При переходе <h2> к <span> вашему примеру все в порядке, поскольку <p> он больше не закрывается автоматически ( <span> это формулировка содержимого).

Что вы можете сделать

Оберните свой шаблон в <div> . В отличие <p> от этого, он может содержать контент любого типа. 🙂