Dynamically change ng-if in custom directive

Question

There is the following code (Jade):

    img(
      data-ng-src = "{{ ctrl.getAttachmentPreview(attachment) }}",
      data-ng-if  = "attachment.media_type == 'image'",
      data-image-error = "xxx"
    )

And my custom directive (Coffee):

module.exports = (app) ->
  app.directive 'imageError', ->
    restrict: 'A',
    link: ($scope, el, attrs, ctrl) ->
      el.attr('data-ng-if', 'false')

It's a prototype. I want to hide element in my custom directive using 'ng-if', but this code doesn't work (element has 'data-ng-if' with 'false' value, but still visible). How can I fix it? Thanks in advance

Answer 1

ng-if tells Angular to watch the $scope and evaluate the given expression if the $scope changes it, including DOM nodes depending on the result.

Direct manipulation it won't do anything.

Instead, manipulate the $scope:

module.exports = (app) ->
  app.directive 'imageError', ->
    restrict: 'A',
    link: ($scope, el, attrs, ctrl) ->
      $scope.attachment = media_type: 'image'