0

На страничке есть элемент с атрибутом

some-attr="Hello Habr!"

В директиву его значение передаётся двумя способами:

  1. через scope

  2. через attrs.someAttr

В директиве эти значения выводятся тоже двумя способами:

  1. через template:

    "{{someAttr}}-{{qwerty}}",

  2. через консоль:

    console.log('qwerty', qwerty); console.log('someAttr', someAttr);

Мне не понятно почему в первом случае не выводится qwerty, а во-втором случае не выводится someAttr. Я надеялся, что и qwerty, и someAttr выведутся в обоих случаях

JSFIDDLE

1 ответ 1

2
  1. В темплейте qwerty не выводится, т.к. переменная не определена в scope, в коде ниже она определена в функции link и выводится.
  2. someAttr в функции link нигде не определена, поэтому ругается ошибкой ReferenceError: someAttr is not defined

Надеюсь комментарии в коде внесут ясность что происходит в директиве.

angular.module('helloHabrahabr', [])
    .directive('habraHabr', function() {        
        return {
            template:"{{some}}-{{qwerty}}", //тут выводятся значения из scope
            scope:{
                some:'@someAttr' //тут передача значения some-attr в scope.some
            },
            
            link: function (scope, element, attrs) {
            	var qwerty = attrs.someAttr; //получение значения из some-attr              
              //scope.some = attrs.someAttr; //можно закомментировать some:'@someAttr' в scope и раскомментировать это
              
              scope.qwerty = 10; //qwerty теперь равно 10
              
              console.log('qwerty', qwerty);
              console.log('someAttr', someAttr);// someAttr is not defined он нигде не определен в этой функции link
            }
        }
    });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="helloHabrahabr">
        <span habra-habr="hello" some-attr="Hello Habr!"></span>   
</div>

Также почитайте документацию по директивам

3
  • Спасибо, стало понятнее. но всё равно не понятно почему второй console.log не выводт переменную из скоупа: jsfiddle.net/4b4US/378
    – cyklop77
    7 ноя 2016 в 11:41
  • 1
    эта функция срабатывает до создания scope, добавь после console.log alert("test");, и убедитесь (до нажатия ок), что данные из scope еще не отрисовались, а функция вызвалась. В документации по функции link сказано: It is executed after the template has been cloned and is where directive logic will be put. 7 ноя 2016 в 12:00
  • @MrFylypenko, не совсем так. Проблема именно в связывании через @. Если использовать например = то значение уже будет доступно. А уж если взять одну из последних версий ангуляра, а не 1.1 как в пример - то все будет работать как и ожидалось
    – Grundy
    7 ноя 2016 в 12:28

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.