Question

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

根据ng-click
更改应用了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');
        });
    }
});

ng-click angularjs上的多个函数

1 个答案: