AngularUI弹出窗口样式改变父元素点击

AngularUI popover style change of parent element on click

本文关键字：元素 改变 样式 窗口 AngularUI      更新时间：2023-09-26

我有一个非常具体的问题。最近我想出了如何在AngularUI弹出窗口中添加一个关闭按钮。最初，用户必须点击弹出窗口父元素来打开和关闭它，所以我添加了一些功能来改变点击事件中元素的样式。通过添加关闭按钮，我想在用户单击它时模拟相同的效果。我在这里放了个管子来玩。

到目前为止，我已经尝试在弹出窗口模板中添加ng-click="toggle(); style=!style"，但这不起作用。我认为我必须访问popoverToggle指令中的style变量，但我不知道如何做到这一点。也可以在HTML中进行操作。

<<p> 弹出窗口模板/strong> 
<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>

解决方案非常简单，所有需要更改的是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>
相关文章：