显示/隐藏有关模型更改的指令内容
Showing/hiding directives content on model changes
我正在寻找一个指令的帮助,我正在尝试使用
我正在努力实现的目标:显示一个指令,该指令将被隐藏,直到调用通知工厂,然后通知将显示错误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
中输入了一个错误,调用了该方法而不是赋值。这导致指令的通知立即与任何通知更改分离。
相关文章:
- 自定义指令中的AngularJS ng模型
- 显示/隐藏有关模型更改的指令内容
- 为什么我的指令(使用链接)没有出现,并允许ng模型看到它
- NG-重复中断指令模型绑定
- 为什么ng选项指令需要ng模型
- 需要使用触摸屏从 AngularJS 指令中更新模型
- 角度指令:当选择更改时,ng 模型未正确更新
- 角度指令没有更新模型视图
- 角度 2 使用指令防止输入和模型更改
- 将ng模型转发到指令中的元素的正确方法是什么
- 无法更新指令的模型
- 如何在事件上对jquery上的ng模型进行指令更新
- 将 ng 模型值传递给角度指令
- 输入文本的ng重复没有填充指令中的ng模型
- mocking和测试指令,隔离范围包含ng模型
- 将用户键入的模型更改为自定义的Angular指令
- 在控制器中将 ng 模型值返回为空的指令
- 角度 - 基于模型创建指令
- 如何将指令模型绑定到异步服务数据
- AngularJS指令模型符号与TypeScript接口