угловая директива не загружает шаблон, статическое приложение (без сервера)

0

Я учу себя Angular и делаю небольшое статическое приложение с localStorage. Я попал в ловушку, хотя, пытаясь получить шаблон для загрузки через директиву. Я до сих пор довольно новичок в этом, и буду благодарен за любые отзывы. Я провел некоторое время, просматривая ответы на предыдущие вопросы, но ни один из них не затронул мою проблему.

Я не получаю никаких ошибок, и когда я проверяю инструменты dev, файл вообще не загружается. Я пробовал использовать другой шаблон: и конфигурации templateUrl, и никто не работал.

Вот мой код директивы:

angular.module('dropForm', [])
 .directive('dropForm', function(){

  return{
    restrict:'E',
    replace:true,
    templateUrl:'drop-form.html',

    link: function(scope, elem, attr){
    var dropButton = angular.element(document.querySelector('#dropButton'));
    }
  }
});

Моя файловая структура является базовой, это просто статическое приложение. У меня есть index.html и в том же каталоге есть drop-form.html. Мои файлы js и связаны через теги скриптов в index.html

Вот моя, где я называю директиву в index.html:

<body ng-controller = "mainController">
    <div drop-form> </div>
      <div class = "container main">
        <h1 ng-bind="$storage.toDos.length || 'All Done!'"></h1>
        <div ng-repeat = "todo in $storage.toDos">
          <div style = "" class = "todo-item">
            <div>
              <h5 ng-bind = "todo.text"></h5>
            </div>
            <i class="fa fa-trash" ng-click="destroyTodo(todo)"></i>
          </div>
        </div>
      </div>
  </body>
</html>

Шаблон директивы не загружается вообще, но у меня нет эррос, пожалуйста, помогите мне понять, что я неправильно понял здесь. Спасибо!!

  • 0
    Вы пропустили директиву ng-app .
  • 0
    Вы загрузили свой модуль в основное приложение?
Показать ещё 1 комментарий
Теги:

1 ответ

1

Сначала вы пропустили свое ng-app с именем в вашем случае dropForm (в моем примере я установил его в "myApp") и добавлю его в свой элемент body

<body ng-app="myApp" ng-controller = "mainController">
    <div drop-form> </div>
      <div class = "container main">
        <h1 ng-bind="$storage.toDos.length || 'All Done!'"></h1>
        <div ng-repeat = "todo in $storage.toDos">
          <div style = "" class = "todo-item">
            <div>
              <h5 ng-bind = "todo.text"></h5>
            </div>
            <i class="fa fa-trash" ng-click="destroyTodo(todo)"></i>
          </div>
        </div>
      </div>
  </body>
</html>

Second.В вашей директиве вы использовали ограничение "E". Это означает, что вы должны использовать его только как Element: <drop-form></drop-form> ("E" для Element), но вы использовали в качестве attr. Если вы хотите работать с <div drop-form> </div>, вы должны добавить ограничение 'A', restrict:**'AE'** или переделать <div drop-form> </div> на <drop-form></drop-form>

и это будет ваш код

angular.module('myApp', [])
 .directive('dropForm', function(){

  return{
    restrict:'AE',
    replace:true,
    templateUrl:'drop-form.html',

    link: function(scope, elem, attr){
    var dropButton = angular.element(document.querySelector('#dropButton'));
    }
  }
});
Поделиться
  • 0
    Большое спасибо! Виноват. Я был уверен, что проблема как-то связана с templateUrl, и я полностью упустил значение ограничения. Спасибо за указание на это. Спасибо, урок усвоен.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню