显示/隐藏有关模型更改的指令内容

Showing/hiding directives content on model changes

本文关键字:指令 模型 隐藏 显示      更新时间:2023-09-26

我正在寻找一个指令的帮助,我正在尝试使用

我正在努力实现的目标:显示一个指令,该指令将被隐藏,直到调用通知工厂,然后通知将显示错误css类(使其看起来像错误通知)或通知css类(让其看起来像正常/成功通知)

问题是,如果我只显示我的指令,它会显示得很好。但当我使用ng if或ng show/hide功能时,视图似乎不会对此做出反应。只是当你在$digest周期之外更新控制器值时。我试着用一块价值美元的手表来捕捉它,但这对我来说也不管用。指令:

angular.module('App').directive('notification', function () {
    return {
        restrict: 'E',
        templateUrl: 'app/shared/notification.html',
        controller: 'notificationController as notification',
    }

})

控制器:

.controller('notificationController', ['notificationFactory',
    function notificationController(notificationFactory) {
        this.notification = notificationFactory.notification;
        this.closeNotification = notificationFactory.closeNotification();
    }])

工厂:

.factory('notificationFactory', ['$ionicLoading', '$ionicPopup', '$ionicModal',
    function notificationFactory($ionicLoading, $ionicPopup, $ionicModal) {
        notificationFactory.notification = {
            text: '',
            error: false,
            show: false
        };
        //show notification
        notificationFactory.showNotification = function (text, error) {
            notificationFactory.notification.text = text || '';
            notificationFactory.notification.error = error || '';
            notificationFactory.notification.show = true;
            //$scope.apply();
            console.log('sfsfds')
        }
        //close notification
        notificationFactory.closeNotification = function () {
            notificationFactory.notification = {
                text: '',
                error: false,
                show: false
            };
        }
    }]);

视图(具有不同控制器的另一个视图的一部分):

<notification>
    <div ng-if="notification.notification.show" class="error">
        <a ng-click="notification.closeNotification()">x</a>
        <p><b>Lorem ipsum dolor sit amet,</b></p>
        <p>
            {{notification.notification.text}}<br /> adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
        </p>
        {{notification.notification.error}}
    </div>
    <div ng-if="notification.notification.show && !notification.notification.error" class="notification">
        <a ng-click="notification.closeNotification()">x</a>
        <p><b>Lorem ipsum dolor sit amet,</b></p>
        <p>
            {{notification.text}}consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
        </p>
        {{notification.error}}
    </div>
    error: <p>{{notification.notification.error}}></p>
    text: <p>{{notification.notification.text}}></p>
    show: <p>{{notification.notification.show}}></p>
</notification>

我一直在尝试我在网上找到的一些建议,比如在指令链接函数中输入$watch,以及尝试设置"scope:{notification:"="}",但我还没有完全做到。

有人能帮忙吗?

非常感谢。

您有两个主要问题。首先,在closeNotification方法中,替换notification对象,而指令的作用域一直指向原始对象并分离。最重要的是,您在notificationController中输入了一个错误,调用了该方法而不是赋值。这导致指令的通知立即与任何通知更改分离。