0

I have an issue with one of our custom directive (alert-animate) not being displayed.

The issue occurs after the popinState changes to inprogress and back to update. Somehow the custom directive does not show...

I have debugged the app and the directive's link function is indeed called. I cannot figure out why the directive is not beeing displayed though...

alert-animate directive definition:

(function () {
    angular.module('commonModule').directive('alertAnimate', function ($animate, $timeout, $rootScope) {
        return {
            restrict : 'E',
            replace : true,
            scope : {
                type : '@',
                zone : '@',
                timeout : '@'
            },
            link : function (scope, iElement) {
                // if there is no timeout defined, we fix it to 5 second
                if (angular.isUndefined(scope.timeout)) {
                    scope.timeout = 5000;
                }

                $rootScope.$on(scope.zone + '::' + scope.type, function (e, message) {
                    // Create alert div
                    var messageElement = angular.element('<div class="alert alert-' + scope.type + '"></div>');
                    messageElement.append(message);

                    iElement.empty();
                    iElement.append(messageElement);

                    // create animation after the delay
                    $timeout(function () {
                        $animate.leave(messageElement);
                    }, scope.timeout);
                });
            }
        };
    });
})();

alert-animate usage within an ng-if directive:

<div ng-if="popinState['save-mappings'] === 'update'">
    <div class="modal-body">
        <fieldset class="marginb">
            <legend>Modifier</legend>
            <alert-animate type="danger" zone="POPIN_SAVE"></alert-animate>
            ...
    </div>
</div>

<div ng-if="popinState['save-mappings'] === 'inprogress'">
    <div class="modal-body">
        <uib-progressbar min="0" max="100" value="100" class="progress-striped active">Le mapping est en cours d'enregistrement...</uib-progressbar>
    </div>
</div>

This is how the error message is shown:

    $scope.showErrorMessage = function (zone, message) {
        $rootScope.$broadcast(zone + '::danger', message);
    };

edit: The markup <alert-animate type="danger" zone="POPIN_SAVE"></alert-animate> does show in the chrome console's sources but it is the error message that does not show.

balteo
  • 23,602
  • 63
  • 219
  • 412
  • 1
    Why are you using `ng-if` ? Because `ng-if` will discard your HTML out of DOM if the condition is not matched. ---- Manage an directive nested in `ng-if` require solid knowledge about many things happen under the engine of the framework. I will suggest you to try ng-show instead. – Linh Pham Feb 01 '16 at 07:51
  • Thanks. I would have thought that the HTML would have been restored when the condition is met again. I'd rather understand what's going on rather than use a tweak in order to get it to work. – balteo Feb 01 '16 at 07:55
  • If it is what you prefered. You should check this out. http://stackoverflow.com/questions/19590314/nested-directives-break-angular – Linh Pham Feb 01 '16 at 07:59
  • 1
    To add on what @LinhPham has said, simply put : `ng-if` creates a new scope. And whenever a new scope is created, your two-way data binding magic will disappear if you do not explicitly link them up. – CozyAzure Feb 01 '16 at 08:02
  • Thanks to you too @CozyAzure. Can you please explain how to "explicitely link them up"? – balteo Feb 01 '16 at 08:12
  • @CozyAzure can you explain on what variables above in my code the two-way data binding would "disappear"? – balteo Feb 01 '16 at 08:21
  • I just read your code, realizing you are declaring `scope:{...}` properties. This also create a new scope. I do not know which one broke the prototypal inheritance, but then again, this is the bible of AngularJs: http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs/14049482#14049482 – CozyAzure Feb 01 '16 at 10:11
  • Are you positive the prototypal inheritance really broke and that it the reason why the alert does not display? How can I check this using the chrome console? – balteo Feb 01 '16 at 10:43

0 Answers0