Question

我正在尝试创建一个自定义angularjs指令，该指令将在对指令的属性进行一些计算后显示或隐藏由指令元素包围的代码块。我没有错误，但两个代码块同时显示，即使它们有不同的条件。

这里是DOM样本

<div ng-repeat="item in myist">
<category-count my-collection="myList" category="{{item.ref}}" tagType="info">
    <!--some code here -->
</category-count>

<category-count class="col-xs-12 col-md-12 no-padding text-center"  my-collection="myList" category="{{item.ref}}" tagType="msg">
    <!--block of code here-->
</category-count>

这是指令，因为它现在是

    myApp.directive('categoryCount', function(){
    return{
        restrict: 'E',
        bindToController:true,
        replace: true,
        transclude: false,
        multiElement: true,
        scope: {
            myCollection: '=myCollection',
            category: '@category',
            tagType: '@tagType'
        },
        controllerAs: 'myCtrl',
        controller: function($scope) {

            var self = this;
            self.myCollection= $scope.myCollection;
            self.category = $scope.category;
            self.tagType  = $scope.tagType;
            self.result = 0;

             self.count =  function(){

                for(var x = 0; x < self.myCollection.length;x++){

                    var item = self.myCollection[x];
                    console.log("category @ x = "+x+" is :"+self.category);
                    if(item.question.category.ref == self.category){
                        self.result++;
                        return;
                    }
                }


            };

        },

        compile: function(tElement, tAttrs) {

            return{
                pre: function(scope, element, attributes, myCtrl){

                    myCtrl.count();
                },
                post: function(scope, element, attributes, myCtrl){


                    console.log("result in directive is: "+myCtrl.result+" for tag : "+ myCtrl.tagType);

                    if(myCtrl.result != null && typeof myCtrl.result != "undefined" && typeof myCtrl.tagType != "undefined"){
                        if(myCtrl.result <= 0){


                            attributes.$set('ngShow' , myCtrl.tagType == "msg" );


                        }
                        else if(myCtrl.result > 0){


                            attributes.$set('ngShow' , myCtrl.tagType != "msg");

                        }
                    }
                }
            }

        }
    }
});

Answer 1

您也可以尝试使用angularjs指令：ng-show和ng-hide而不是自定义指令。

我想知道如何使用自定义指令显示/隐藏代码块

1 个答案: