Question

我正在寻找一些帮助，我正试图开始工作

我想要实现的目标：显示一个指令，该指令将被隐藏，直到调用通知工厂，然后通知将显示错误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：＆＃39; =＆＃39;}但我还没到那里。

有人可以帮忙吗？

非常感谢。

Answer 1

你有两个主要问题。首先，在closeNotification方法中替换notification对象，而指令的范围始终指向原始对象并被分离。最重要的是，您在notificationController处输了一个拼写错误，调用该方法而不是分配。这导致指令的通知立即脱离任何通知更改。

在模型更改中显示/隐藏指令内容

1 个答案: