ng-click angularjs의 복수 기능

Question

AngularJs를 처음 사용하고 지금 배우고 있습니다. 현재 과제에서 ng-click에서 여러 가지 작업을 수행해야합니다. 숨기고에 따라 약간의 DOM 요소를 표시하려면

2. 변경 NG 클릭이에 적용되는 요소의 배경 NG를 클릭, 나는 이것이 지시어를 사용하여 acheive하기 위해 노력하고있어 .

마크 업 :

<div class="catFilter f6" ng-click="showSubCat = !showSubCat;toggleDropDown()"> 
     Choose A Genre 
    </div> 

    <div class="inactive" ng-show="showSubCat" ng-click="hideSubCat = !hideSubCat" ng-hide="!hideSubCat"> 
    </div> 
    <div class="cat-drop-menu-list" ng-show="showSubCat" ng-hide="!hideSubCat"> 
    </div> 

각 지시어

retailApp.directive('toggleDropDown', function() { 
return function(scope, element, attrs) { 
    $scope.clickingCallback = function() { 
     element.css({'background':'url("../images/down-arrow.png") no-repeat 225px 12px;'}); 
    }; 
    element.bind('click', $scope.clickingCallback); 
} 
}); 

문제 : 즉, 내가 클릭하면

나는, 적용되는 지침을 볼 수 아니에요 장르를 선택하면 다른 두 div를 숨기고 표시하지만 뒷면은 변경하지 않습니다.

Answer 1

당신은 바인딩 또는 지침이 몇 가지 방법을 수행 할 수 있습니다

http://jsfiddle.net/abjeex75/

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

app.controller('AppCtrl', function ($scope) { 
    $scope.show_sub_cat = false; 

    $scope.show = function() { 
     $scope.show_sub_cat = true; 
    } 

    $scope.hide = function() { 
     $scope.show_sub_cat = false; 
    } 
}); 

app.directive('toggleBg', function() { 
    var directive = { 
     restrict: 'A', 
     link: link 
    } 

    return directive; 

    function link(scope, element, attr) { 
     element.on('click', function() { 
      element.toggleClass('red'); 
     }); 
    } 
});