我有一个非常具体的问题。最近我想出了如何 add a close button to an AngularUI popover 。最初,用户必须单击弹出窗口父级才能打开和关闭它,因此我添加了在单击事件上更改该元素的样式的功能。添加关闭按钮后,我想在用户单击它时模拟相同的效果。我设置了plnkr here和玩。
到目前为止,我已尝试在弹出窗口模板中添加 ng-click="toggle(); style=!style"
,但这不起作用。我认为我必须访问 popoverToggle
指令中的 style
变量,但我不知道该怎么做。也可以在 HTML 中对其进行操作。
弹出窗口模板
<div><span ng-click="toggle()">X</span></div>
<p>content</p>
popoverToggle.js
angular.module('app')
.config(function($tooltipProvider) {
$tooltipProvider.setTriggers({'open': 'close'});
})
.directive('popoverToggle', function($timeout) {
return {
scope: true,
link: function(scope, element, attrs) {
scope.toggle = function() {
$timeout(function() {
element.triggerHandler(scope.openned ? 'close' : 'open');
scope.openned = !scope.openned;
scope.style = !scope.style; // doesn't do anything either
});
};
return element.on('click', scope.toggle);
}
};
});
index.html
<span ng-class="{'border-gray': style}" style="margin: 40px" ng-click="style=!style" class="red-btn">
<span popover-placement="bottom" popover-template="'popover-template.html'"
popover-trigger="open" popover-append-to-body="true" popover-toggle>click me</span>
</span>
最佳答案
解决办法很straightforward ,需要更改的只是 style
变量。只需将其更改为 $scope.style
,如下所示:
popover-template.html
<div><span ng-click="toggle(); $scope.style=!$scope.style">X</span></div>
<p>content</p>
index.html
<span ng-class="{'border-gray': $scope.style}" style="margin: 40px" ng-click="$scope.style=!$scope.style" class="red-btn">
<span popover-placement="bottom" popover-template="'popover-template.html'"
popover-trigger="open" popover-append-to-body="true" popover-toggle>click me</span>
</span>
关于javascript - 单击时父元素的 AngularUI 弹出框样式发生变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32465097/