AngularJS + jQuery - 지시문 내부에서 요소를 숨기거나 표시 할 수 없습니다.

Question

웹 페이지에 표시 할 요소가 있습니다.이 요소는 트위터 부트 스트랩 아이콘입니다. <i class="icon-trash"></i>입니다.

페이지가로드는 아이콘 스타일로에 숨겨진 클래스를 적용하여 숨겨진 경우 :

var app = angular.module('testApp', []); 

app.directive('testDir', function() { 
    return function(scope, iElement, iAttrs) { 
     iElement.customMethod({ 
      source: function() { 
       //Some other statements 
       jQuery(".icon-trash").removeClass('hidden'); 
      } 
     }); 
    }; 
}); 

: 지금, 가장 간단한 형태처럼 보이는 지침을 만든

.hidden { 
    display: none; 
} 

이 지시문은 특성으로 입력란에 배치됩니다. 사용자가 입력 텍스트를 입력하면 지시문 함수가 실제로 호출됩니다. 그러나 아이콘이 다시 표시되지 않습니다. 즉, jQuery 코드는 함수가 호출 되더라도 숨겨진 클래스를 제거하지 않는 것처럼 보입니다 (console.log()을 사용하여 선택). 왜 그런가?

Answer 1

해결 방법 1 : jQuery를 - .show()와 .hide(). 당신이 원하는 때마다 pageshow

$('.icon-trash').hide() 

에

숨기기 그것을 표시합니다.

$('.icon-trash').hide() 

---

해결 방법 2 : 그들을 추가/제거, 두 개의 클래스를 생성합니다.

.hide-me { display: none !important;} 

.show-me { display: inline-block !important; } 

$('.icon-trash').removeClass('hide-me').addClass('show-me'); 

---

해결 방법 3

: 더러운 솔직 방법

$('.icon-trash').attr('style', 'display: inline-block !important;') 

Answer 2

이 코드는 ng-show 지시문을 사용하는 휴지통 아이콘이있는 버튼을 보여줍니다. 필드 검색이 무언가로 설정 될 때마다, 즉 : 사용자가 입력 텍스트에 내용을 입력했습니다. 그렇지 않으면 텍스트가 제거되면 버튼이 다시 숨겨집니다.

<input type="text" ng-model="search" /> 
<button class="btn" ng-show="search" ng-click="trash()"> 
    <i class="icon-trash"></i> button 
</button> 

버튼을 클릭하면 휴지통 기능이 호출됩니다.

app.controller('HomeController', ['$scope', function($scope) { 
    $scope.search = undefined; 

    $scope.trash = function() { 
     console.log('clicked: trash button'); 
    }; 
}]); 

Answer 3

은 아마 각 지침에서 숨기기/쇼 도움이 될 수 있습니다. Jquery는 html로 표시되기 전에 포함되어야하며, 둘러보기는 의도 한대로 작동합니다.