2013-11-22 5 views
2

두 div가 onclick 이벤트에 조건부로 표시하려고합니다.angularjs 범위 변수 조건절 div에 대한 onclick 변경

내-각도-app.js

$(document).on('click', '#showless', function(el) { 
var appElement = document.querySelector('[ng-app=myapp]'); 
var $scope = angular.element(appElement).scope(); 
    $scope.$apply(function() { 
     $scope.value = false; 
    }); 

}); 

$(document).on('click', '#showmore', function(el) { 
    var appElement = document.querySelector('[ng-app=myapp]'); 
    var $scope = angular.element(appElement).scope(); 
    $scope.$apply(function() { 
     $scope.value = true; 
}); 

}); 

및 MyApp를 내 사업부 (myapp.html)

<div ng-show="desc" id="description" class="text-muted" style="padding-top:5px;padding-left:10px;padding-right:10px;color:#2E2E2E;font-size:11px;">{{myapp.value|truncate}}<span><a id="showmore" href="">more</a></span> 
    </div> 
    <div ng-show="!desc" id="description" class="text-muted" style="padding-top:5px;padding-left:10px;padding-right:10px;color:#2E2E2E;font-size:11px;">{{myapp.value}}<span><a id="showless" href="">less</a></span> 
    </div> 

(절단이 잘 작동 내가 쓴 필터입니다.)

+0

jquery에서 온 것처럼 보입니다. Angular는 "ng-click"을 바인딩 할 수 있으므로 ng-click = toggle()과 같은 작업을 수행 할 수 있으며 JS 코드에는 desc 변수의 상태를 변경하는 toggle() 함수 만 있습니다. – asafge

+0

ng-click = toggle()이 허용되지 않음을 의미하는 인라인 스크립트를 허용하지 않는 크롬 확장을 위해이 스크립트를 사용하고 있습니다. –

+0

'ng-click'은 인라인 스크립트가 아닙니다. – Stewie

답변

6

정확히 무엇을 하려는지 모르겠지만 Angular는 ng-click을 제공하므로 $(document).on('click')에 바인딩하면 안됩니다.

내가 조건부 쇼를위한 간단한 방법을 제안 것 :

<div ng-show="desc" id="description" class="text-muted" style="padding-top:5px;padding-left:10px;padding-right:10px;color:#2E2E2E;font-size:11px;">{{myapp.value|truncate}}<span><a id="showmore" ng-click="desc = true" href="#">more</a></span> 
    </div> 
    <div ng-show="!desc" id="description" class="text-muted" style="padding-top:5px;padding-left:10px;padding-right:10px;color:#2E2E2E;font-size:11px;">{{myapp.value}}<span><a id="showless" ng-click="desc = false" href="#">less</a></span> 
    </div> 

위의 사용 ng-clickdesc의 값을 설정할 수 있습니다. 따라서 divs을 토글하기 위해 컨트롤러에 다른 로직이 필요하지 않습니다.

+0

목표는 대문자를 표시하고 숨기려면 일반적으로 desc를 전환하는 것입니다 (moreless). 나는 분명히 희망한다. 고마워. –

+0

업데이트 됨. 나는'ng-click '을'a'로 옮겼습니다. –