Toggle text Collapse to Expand

Я пытаюсь изменить текст «Свернуть», чтобы «развернуть», нажав на h2 тег. в то же время я применяю «активный» класс к тегу h2. используя следующую директиву, которая работает хорошо, но теперь я невежественный о том, как изменить "коллапсу" текст для расширения на h2 тегов нажмитеToggle text Collapse to Expand

HTML

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

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

Может ли любой плз помочь ..

источник

2015-08-17 Nilesh Mahajan

Заменить ** Collapse ** с ** {{текст}} ** и в функции связи сделать scope.text = "Развернуть" (или «Collapse) –

Поскольку эта директива не имеет новый (выделенный) объем, вы загрязняете область с помощью «текстовой» модели, и вы не можете иметь более одной стрелки краха в том же шаблоне (область). –

Если вы хотите сделать манипуляции DOM в вашей директиве вы можете изменить содержимое элемента, выполнив:

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

Использование html вместо text работает. Вам нужно переместить ссылку внутри h2, чтобы директива смотрела ссылку.

Другой подход заключается в изменении текста ссылки с помощью области видимости, но тогда вам необходимо иметь шаблон и привязать текст ссылки к области действия. Затем вы должны обернуть оба элемента в директиве. Это может сделать решение слишком большим для этого простого случая использования ...

источник

2015-08-17 10:57:41

ваш первый подход действительно классный и работал на меня .... –

Другое предложение по составлению директивы: инкапсулирует 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 manipulaton;
- использует функцию перехода;

Такая директива проста в использовании:

<togglable>My Tandem URL</togglable>

источник

2015-08-17 12:22:10 Rustam

на самом деле это requries с помощью области: {}, в противном случае несколько директив, используемых на одной странице, имеют одинаковые $ scope.isCollapsed state – Rustam

Кроме того, '$ scope.isCollapsed = false ; 'можно удалить, потому что' undefined' также является ложным в шаблоне. –

В зависимости от того, как приложение работает, может быть, вы можете попробовать это:

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/

источник

2015-08-17 14:54:47

Toggle text Collapse to Expand

ответ

Смежные вопросы