Question

我已经制定了一个指令，其中单个模板用于控制器中的三个功能。字段的模型是相同的。如果第三次调用该指令，我想隐藏一个字段。

 <div class="active tab-pane " ng-if="linkid === '1'">
                        <mallsonline-product info="active_products"></mallsonline-product>
                    </div>

                    <!--Active products list ends here -->

                    <!-- Get Inactive Products -->

                    <div class="active tab-pane" ng-if="linkid === '2'" >
                        <mallsonline-product info="inactive_products"></mallsonline-product>
                    </div>

                    <!--Get most viewed products ends here -->

                    <div class="active tab-pane" ng-if="linkid === '3'" >
                        <mallsonline-product info="mostviewed_products"></mallsonline-product>
                    </div>

我的控制器看起来像这样

mainControllers.controller('DashboardController', ['$scope', '$http', '$routeParams', '$cookies', '$rootScope', function ($scope, $http, $routeParams, $cookies, $rootScope) {

        /* Getting all grid links  */

        $scope.grLinks = function (Id) {
            console.log(Id);
            $scope.linkid = Id;
        };

        /* Getting all grid links ends here */

        /* Getting all active product list */

        $scope.active_product = function () {
            $http.get('js/active-products.json',
                    {headers:
                                {'Content-Type': 'application/x-www-form-urlencoded',
                                    'Authorization': $rootScope.keyword_auth_token}
                    })
                    .success(function (data) {
                        $scope.active_products = data.items;

                        console.log($scope.active_products);
                    })
                    .error(function (data) {
                        console.log(data);
                    });
        };

        /* Getting all active product ends here */

        /* Getting all inactive product */

        $scope.inactive_product = function () {
            $http.get('js/inactive-products.json',
                    {headers:
                                {'Content-Type': 'application/x-www-form-urlencoded',
                                    'Authorization': $rootScope.keyword_auth_token}
                    })
                    .success(function (data) {
                        $scope.inactive_products = data.items;
                        console.log($scope.inactive_products);
                    })
                    .error(function (data) {
                        console.log(data);
                    });
        };
        /* Getting all inactive product */

        /* Getting all most viewed products */

        $scope.most_viewed = function () {

            $http.get('js/most-viewed.json',
                    {headers:
                                {'Content-Type': 'application/x-www-form-urlencoded',
                                    'Authorization': $rootScope.keyword_auth_token}
                    })
                    .success(function (data) {
                        $scope.mostviewed_products = data.items;
                        console.log($scope.mostviewed_products);

                    })
                    .error(function (data) {
                        console.log(data);
                    });
        };
        /* Getting all most viewed products  */

        $scope.active_product();
        $scope.inactive_product();
        $scope.most_viewed();
    }]);

/* Active products / Inactive  and most viewed Directive */

mainControllers.directive('mallsonlineProduct', function () {
    return {
        restrict: 'E',
        scope: {
            productInfo: '=info'
        },
        templateUrl: 'directives/dashboard_product.html'
    };
});

/* Active products / Inactive directive ends here*/

，模板看起来像这样

 <li class="bord-1-solid-ccc mg-bt-25" ng-repeat="active_products in productInfo">
                    <article class="aa-properties-item mg-top-0-notimp">
                        <a class="aa-properties-item-img" href="#/product">
                            <img alt="img" class="twohun-oneseventy" src="img/item/6.jpg">
                        </a>
                        <div class="aa-properties-item-content">
                            <div class="aa-properties-about padding-0-notimp">
                                <h5><a href="#/product">{{active_products.name}}</a></h5>
                                <p class="font-size-11-imp"><i class="fa fa-building-o" aria-hidden="true"></i> {{active_products.mall.name}}</p>
                                <p class="font-size-11-imp"><i class="fa fa-map-marker" aria-hidden="true"></i> {{active_products.mall.address}}</p>                      
                                <p class="font-size-11-imp"><i class="fa fa-phone" aria-hidden="true"></i> {{active_products.shop.telephone}}</p>                      
                                <p class="font-size-11-imp"><i class="fa fa-eye" aria-hidden="true"></i> {{active_products.views}}</p>   
                            </div>
                        </div>
                    </article>
                </li>

模型中存在所有字段我只想在active_products.view时显示info="mostviewed_products"。我怎样才能做到这一点？

Answer 1

在指令中传递了“linkid”以了解模板中的当前linkid值

请进行以下更改

指令

mainControllers.directive('mallsonlineProduct', function () {
return {
    restrict: 'E',
    scope: {
        productInfo: '=info',
        linkid:'=linkid'
    },
    templateUrl: 'directives/dashboard_product.html'
  };
});

HTML

<div class="active tab-pane " ng-if="linkid === '1'">
     <mallsonline-product info="active_products" linkid="linkid"></mallsonline-product>
</div>

  <!--Active products list ends here -->

   <!-- Get Inactive Products -->

   <div class="active tab-pane" ng-if="linkid === '2'" >
        <mallsonline-product info="inactive_products" linkid="linkid"></mallsonline-product>
   </div>

   <!--Get most viewed products ends here -->

   <div class="active tab-pane" ng-if="linkid === '3'" >
        <mallsonline-product info="mostviewed_products" linkid="linkid"></mallsonline-product>
   </div>

在模板中（'directives / dashboard_product.html'）

 <p class="font-size-11-imp"><i class="fa fa-eye" aria-hidden="true" ng-if="linkid==3"></i> {{active_products.views}}</p>

希望这能解决您的问题。

如何在使用指令时隐藏元素？

1 个答案: