Question

我想在点击h2标签时将“折叠”文字更改为“展开”。同时我将“活动”类应用于h2标记。使用以下指令，工作正常，但现在我对如何更改“崩溃”文本以展开h2标签点击

毫无头绪

HTML

<h2 class="panel-title" toggleclass>My Tandem URL</h2>
<a class="collapse-arrow">Collapse</a>

JS

.directive("toggleclass", function () {
    return {
        restrict: 'A',
        scope: false,
        link: function (scope, element, attrs) {
            element.bind("click", function () {
                element.toggleClass('active');
            });
        }
    }
})

任何人都可以帮助..

Answer 1

在如果要在指令中执行DOM操作，可以通过执行以下操作来更改元素的内容：

var link = element.find('a');
link.text(link.text() === 'Collapse' ? 'Expand' : 'Collapse')`.

使用html代替text也有效。您必须移动h2内的链接才能使指令看到链接。

另一种方法是通过范围更改链接文本，但是您需要有一个模板并将链接文本绑定到指令范围。然后你必须将两个元素包装在一个指令中。这可能会使解决方案对于这个简单的用例来说太大了......

Answer 2

关于编写指令的另一个建议：在内部封装html和behaivor：fiddle。

angular.module('myModule', [])
        .directive('togglable', function () {

            return {
                restrict: 'EA',
                template: '<div><h2 class="panel-title" ng-class="{ active: isCollapsed }" ng-click="toggle()" ng-transclude></h2><a class="collapse-arrow">{{ isCollapsed ? "Expand" : "Collapse"}}</a></div>',
                transclude: true,
                replace: true,
                scope: false,
                controller: function ($scope) {

                    $scope.isCollapsed = false;

                    $scope.toggle = function () {
                        $scope.isCollapsed = !$scope.isCollapsed;
                    };
                }
            };
        });

主要特点：
- 没有手动DOM操作;
- 使用transclude功能;

这样的指令很容易使用：

＆＃13;

<togglable>My Tandem URL</togglable>

＆＃13;

Answer 3

根据您的应用的工作方式，也许您可以试试这个：

HTML：

<h2 class="panel-title" ng-class="{'active': expand}" toggleclass>My Tandem URL</h2>
<a class="collapse-arrow" ng-hide="expand">Collapse</a>
<a class="collapse-arrow" ng-show="expand">Expand</a>

JS：

angular.module('myApp', [])
.controller('myCTRL', function($scope) {

  $scope.expand = false;

})
.directive("toggleclass", function () {
  return {
    restrict: 'A',
    scope: false,
    link: function (scope, element, attrs) {
      element.bind('click', function() {
        scope.$apply(function() {
          scope.expand = !scope.expand;
        });
      });
    }
  }
});

http://jsfiddle.net/uqbc9asf/

切换文本折叠显示

3 个答案: