ng内的自定义角度指令 - 如果没有显示

时间:2016-02-01 07:16:24

标签: angularjs angularjs-directive angularjs-scope

我的一个自定义指令(alert-animate)没有显示出现问题。

popinState更改为inprogress并返回update后,会出现此问题。不知何故,自定义指令没有显示......

我调试了应用程序,确实调用了指令的链接功能。我无法弄清楚为什么指令没有显示出来......

alert-animate指令定义:

(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);
                });
            }
        };
    });
})();

在ng-if指令中使用alert-animate:

<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>

这是错误消息的显示方式:

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

修改:标记<alert-animate type="danger" zone="POPIN_SAVE"></alert-animate>确实显示在Chrome控制台的来源中,但它是未显示的错误消息。

0 个答案:

没有答案