angularjs - ng-click angularjs 上的多个功能

Question

我是 AngularJs 的新手，现在正在学习，在我目前的任务中，我需要在 ng-click 上实现多项目标。

1. 基于 ng-click 隐藏和显示一些 DOM 元素

2. 更改应用 ng-click 的元素的背景，我正在尝试使用指令来实现这一点。

加价：

    <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');
        });
    }
});