0

Здравствуйте. Директива не отрабатывает как положено. Код директивы совсем простой.

user.directive('avatar', function(){
return{
    restrict: 'A',
    template: '<img class="avatar" src="" alt="avatar" />',
    link: function($scope, element, attrs){
        element.find('img').attr('src', attrs.avatar);
    }
};
});

В консоле видно: консоль

В код вставляется адрес картинки, но директива его не принимает. Исходник

В первом случае директива отрабатывается (успешно) из контроллера userCtrl, во втором случае из родительского контроллера. В исходнике в обоих случаях виден адрес картинки. Почему директива его не забирает в одном случае?

Если же в шаблоне директивы прописать непосредственно

template: '<img class="avatar" src="{{user.avatar}}" alt="avatar" />',

Тогда картинка отображается, но такой вариант лишает абстракции. jsfiddle.net/t2yaLdq6/7

Дополнение: Проблема решена. В родительском контроллере директива исполняется прежде, чем значение присваивается переменной. Решить можно добавив следующий код:

    scope.$watch(attrs.avatar, function(val){
            element.find('img').attr('src', val);
        });

Stepan Kasyanenko предложил более правильное решение в ответе.

2 ответа 2

1

Необходим пример кода, показывающий, как Вы используете директиву avatar. Ваша директива успешно работает на тестовом jsfiddle.

angular.module('ExampleApp', [])
  .controller('ExampleController', function($scope) {
    $scope.urlImage = "https://www.google.com/images/nav_logo242.png";
  })
  .directive('avatar', function() {
    return {
      restrict: 'A',
      template: '<img class="avatar" src="" alt="avatar" />',
      link: function($scope, element, attrs) {
        element.find('img').attr('src', attrs.avatar);
      }
    };
  });;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleController">
    <h2>
    Статичная картинка
    </h2>
    <div avatar="https://www.google.com/images/nav_logo242.png"></div>
    <h2>
    Картинка с переменной
    </h2>
    <div avatar="{{urlImage}}"></div>
  </div>
</div>

Обновление.

После представления примера не работающего кода с проблемой ,проблема понятна.

Проблема была в обновлении переменной в директиве . Вы имеете два контроллера: родительский и дочерний. В дочернем контроллере вы меня переменную, используемую в родительском. На момент создания директивы в родительском контроллере, переменная еще не инициализирована. Соотвественно, вам надо в директиве реагировать на изменение переменной. Есть много способов это сделать, но самый лучший - использовать изолированный scope.

Пример на jsfiddle .

angular.module('ParentApp', ['ExampleApp'])
  .controller('ParentCtrl', function($scope) {
    $scope.user = {};
  });

angular.module('ExampleApp', [])
  .controller('ExampleController', function($scope) {
    var data = {};
    data.user = {
      urlImage: "https://www.google.com/images/nav_logo242.png"
    };
    angular.extend($scope.user, data.user);

  })
  .directive('avatar', function() {
    return {
      restrict: 'A',
      scope: {
        avatar: "@"
      },
      template: '<img class="avatar" src="{{avatar}}" alt="avatar" />',
      link: function($scope, element, attrs) {
        //element.find('img').attr('src', attrs.avatar);
      }
    };
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="ParentApp">
  <div ng-controller="ParentCtrl">
    <h2>Картинка в родителе</h2>
    <div avatar="{{user.urlImage}}"></div>
    <div ng-controller="ExampleController">
      <h2>Картинка с переменной</h2>
      <div avatar="{{user.urlImage}}"></div>
      <div>
        <img src="{{user.urlImage}}" />
      </div>
    </div>
  </div>
</div>

P.S. простите за форматирование, пишу с мобильного.

5
  • У меня она тоже работает, но только в одном контроллере. В родительском не хочет. Вот написал как у меня реализовано jsfiddle.net/t2yaLdq6/7 Commented 18 мар. 2016 в 20:51
  • @Grundy директива отрабатывает верно, но не везде. А надо что бы везде работала. Commented 18 мар. 2016 в 21:01
  • Вот вариант, в котором видно, что значение в родительском доступно. Но в директиву почему-то не попадает. Commented 18 мар. 2016 в 21:12
  • @fedornabilkin я обновил мой ответ. Пожалуйста, обновите ваш вопрос, добавьте в него пример кода, показывающий проблему и ссылку на jsfiddle. Commented 19 мар. 2016 в 7:02
  • @fedornabilkin :-D так-то ответ не я писал
    – Grundy
    Commented 19 мар. 2016 в 9:16
1

Так как при установке значения используется интерполяция

avatar="{{user.urlImage}}"

то в методе link значение еще не установлено. Чтобы отследить изменение таких атрибутов можно использовать $observe

angular.module('ParentApp', ['ExampleApp'])
  .controller('ParentCtrl', function($scope) {
    $scope.user = {};
  });

angular.module('ExampleApp', [])
  .controller('ExampleController', function($scope) {
    var data = {};
    data.user = {
      urlImage: "https://www.google.com/images/nav_logo242.png"
    };
    angular.extend($scope.user, data.user);

  })
  .directive('avatar', function() {
    return {
      restrict: 'A',
      template: '<img class="avatar" src="" alt="avatar" />',
      link: function($scope, element, attrs) {
        attrs.$observe('avatar', function(avatar) {
          element.find('img').attr('src', avatar);
        });

      }
    };
  });
.error {
  color: red;
  font-style: italic;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<div ng-app="ParentApp">
  <div ng-controller="ParentCtrl">
    <h2>Картинка в родителе</h2>
    <div avatar="{{user.urlImage}}"></div>
    <div ng-controller="ExampleController">
      <h2>Картинка с переменной</h2>
      <div avatar="{{user.urlImage}}"></div>
      <div>
        <img src="{{user.urlImage}}" />
      </div>
    </div>
  </div>
</div>

2
  • а что же в итоге использовать? Изолированный scope, $watch или $observe? Что будет работать быстрее и экономичнее? Commented 19 мар. 2016 в 13:33
  • @fedornabilkin, зависит от приложения, все примерно равнозначно
    – Grundy
    Commented 19 мар. 2016 в 13:42

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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