Директива, показывающая пустую вкладку

Я хочу реализовать директивы в своем приложении, но я не могу даже начать с самого простого. Может кто-нибудь сказать мне, почему?Директива, показывающая пустую вкладку

JS:

angular 
     .module('app.admin.catalog.nutritional_facts') 
     .directive('nutritionalInfo', nutritionalInfo); 

function nutritionalInfo(){ 

    return{ 
     restrict: 'E', 
     scope: { 
      quantity: '=', 
      unit: '=' 
     }, 
     template: "<div> Hello world {{ '{{quantity.qty}} {{unit.u}}' }}</div>" 
    }; 
}

HTML:

<nutritional-info quantity="{qty:4}" unit="{u:'g'}"></nutritional-info>

Я несколько новых для Угловое, так это, вероятно, самый простой вопрос когда-либо. Он показывает только пустую метку, она даже не показывает мир Hello. Я уже пытался отправлять ints, строки и объекты в качестве атрибутов.

источник

2016-12-21 Sslink

Ну, чтобы начать с вами объявляем 'NutritionalInfo' с капиталом' n', который должен быть 'nutritionalInfo' – Jax

Во-вторых, ваш синтаксис объекта является неправильным. 'quantity =" {qty: 4} "' будет правильным способом передать объект этому атрибуту –

Спасибо за ваш ответ! Действительно глупые ошибки от меня, но исправлены и то и другое не работает – Sslink

я исправил свой код, как показано ниже, чтобы получить вашу директиву работает, как ожидалось: Working Fiddle

Мои изменения:

Исправлено имя директивы для ГорбатыйРегистр
Исправленный угловое binding в html
Исправлен синтаксис объектов, которые передаются в директиву.

HTML:

<nutritional-info quantity="{qty:4}" unit="{u:'g'}"></nutritional-info>

Контроллер:

angular.module('app.admin.catalog.nutritional_facts', []) 
    .directive('nutritionalInfo', nutritionalInfo); 

function nutritionalInfo(){ 

return{ 
    restrict: 'E', 
    scope: { 
     quantity: '=', 
     unit: '=' 
    }, 
    template: "<div> Hello world {{quantity.qty}} {{unit.u}}</div>" 
}; 
}

источник

2016-12-21 16:43:12 superUser

Модуль объявлен в другом .js, а также приложение ng-app. Оба js реализованы в HTML. спасибо за Ваш ответ! – Sslink

Я отклонил вас, потому что вы поощряете копирование кода вместо того, чтобы объяснять *, что * вы изменили.Если вы измените это, я отредактирую DV. –

@DanPantry Извините, что я добавил сначала код, а затем начал добавлять изменения, которые я сделал. – superUser

У вас есть несколько вопросов:

NutritionalInfo должен быть nutritionalInfo (camelCase). Вот как Angular будет знать, чтобы связать эту директиву с тегом HTML <nutritional-info>. См. Directive Normalization.
Вы не правильно передаете объекты в директиве. quantity="{qty=4}" должно быть quantity="{qty: 4}".
Вы не правильно оцениваете выражение в шаблоне. {{ '{{quantity.qty}} {{unit.u}}' }} может просто быть {{quantity.q}} {{unit.u}}. Angular expressions интерпретируются как код JavaScript, выполняемый в текущей области. Таким образом, вы можете даже строить выражения типа {{quantity.q.toFixed(1) + ' ' + unit.u.toUpperCase()}} (в результате получается 4.0 G).

Со всеми этими исправлениями, вот working fiddle.

источник

2016-12-21 16:46:55

Вот мое полное решение:

<!doctype html> 
<html lang="en" ng-app="app.admin.catalog.nutritional_facts"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 

</head> 
<body > 

<nutritional-info quantity="{qty: 3}" unit="{u: 'g'}"></nutritional-info> 

<script 
     src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"> 
</script> 

<script> 

    function nutritionalInfo(){ 
     return { 
      restrict: 'E', 
      scope: { 
       quantity: '=', 
       unit: '=' 
      }, 
      template: "<div> Hello world '{{quantity.qty}} {{unit.u}}'</div>" 
     }; 
    } 

    angular 
      .module('app.admin.catalog.nutritional_facts', []) 
      .directive('nutritionalInfo', nutritionalInfo); 


</script> 
</body> 
</html>

источник

2016-12-21 16:52:35

Директива, показывающая пустую вкладку

ответ

Смежные вопросы