Вопрос:

Недопонимание директив AngularJS

javascript angularjs angular-directive

36 просмотра

2 ответа

15 Репутация автора

Я пытаюсь создать базовое приложение с заголовком и основным видом, используя директивы. Изначально у меня была директива в отдельном файле, но я переместил ее в app.js, чтобы устранить проблему.

Я пробовал несколько разных вещей:

  • <app-header> & <div=app-header>
  • Изменение templateUrl на шаблон: «Заголовок теста»
  • Создание цепочки директивы и app.directive

Мой index.html:

    <!DOCTYPE html>
    <html lang="en" ng-app="simpleLoginApp">

    <head>
        <meta charset="utf-8" />
        <title> Simple Login </title>
    </head>

    <body>
        <div app-header></div>
        <main role="main" ng-view></main>

        <script src="resources/angular/angular.min.js"></script>
        <script src="resources/angular-route/angular-route.js"></script>
        <script src="app.js"></script>
    </body>

    </html>

Мой app.js:

    var app = angular.module('simpleLoginApp', ['ngRoute'])

    .directive('app-header', function() {
      return {
        templateUrl: '/header/header.html'
      };
    })

    .config(['$routeProvider', function($routeProvider) {
        $routeProvider
            .when('/login', {
                templateUrl: '/login/login.html',
                controller: 'LoginCtrl'
            })
    }]);

header.html

    <header>
            <h1>HEADER</h1>
    </header>
Автор: Ellie Crome Источник Размещён: 22.08.2016 09:16

Ответы (2)


1 плюс

3165 Репутация автора

Header.html просто должен быть:

<h1>HEADER</h1> 

Ваша директива должна быть:

.directive('appHeader', function() {
  return {
    restrict: 'E', //This will make your directive work as an element  
    templateUrl: '/header/header.html'
  };
})

Затем вы просто включаете свою директиву в код как элемент:

<app-header></app-header>

Обратите внимание, что вышесказанное будет работать только со словами «Заголовок» - вы, вероятно, хотите каким-то образом определить различные заголовки, верно?

.directive('appHeader', function() {
  return {
    scope: {
        headerText: '='; 
    }
    restrict: 'E', //This will make your directive work as an element  
    templateUrl: '/header/header.html'
  };
})

Тогда в вашем коде:

<app-header header-text="lol this is the content of my header ^_^"></app-header> 

Таким образом, директива может использоваться повторно.

Автор: VSO Размещён: 22.08.2016 09:22

1 плюс

3669 Репутация автора

Решение

Проблема в том, как вы регистрируете свою директиву. При определении директивы вы должны использовать регистр верблюда, например, appHeaderвместо app-header. При использовании его в шаблоне вы должны использовать тире, как вы сделали. Вы можете увидеть документацию здесь под заголовком Нормализация

Короче смена

.directive('app-header', function() {
  return {
    templateUrl: '/header/header.html'
  };
})

в

.directive('appHeader', function() {
  return {
    templateUrl: '/header/header.html'
  };
})
Автор: Dustin Hodges Размещён: 22.08.2016 09:27
Вопросы из категории :
32x32