Afficher/Masquer la directive angulaire sur le bouton Cliquez sur

J'ai une page HTML avec trois boutons. J'ai aussi deux directives angulaires. Ce que j'essaye d'accomplir est quand le bouton un est cliqué, je veux montrer la directive 1 pour montrer et la directive 2 pour cacher. Lorsque vous cliquez sur le bouton 2, je souhaite que la directive 1 s'affiche et la directive 2 s'affiche. Voici mes directives est-:Afficher/Masquer la directive angulaire sur le bouton Cliquez sur

.directive('topPosts', function() { 
    return { 
    restrict: 'E', 
    templateUrl: 'topPosts.html', 
    controller: 'PostsController' 
    } 
}); 

.directive('otherPosts', function() { 
    return { 
     restrict: 'E', 
     templateUrl: 'otherPosts.html', 
     controller: 'PostsController' 
    } 
    });

ici est mon contrôleur:

.controller('PostsController', ['$scope', 'PostsFactory', function($scope, PostsFactory) { 

    $scope.posts = []; 
    $scope.showTopPosts = true; 
    $scope.showOtherPosts = false; 

    $scope.topPosts = function() { 
     $scope.showTopPosts = true; 
     $scope.showOtherPosts = false; 
    }; 

    $scope.otherPosts = function() { 
     $scope.showTopPosts = false; 
     $scope.showOtherPosts = true; 
    }; 

    $scope.areTopPosts = function(posts) { 
     return posts.privacy === 'public' && posts.comments > 10 && posts.views > 9000 && posts.title.length < 40; 
    }; 

    $scope.areOtherPosts = function(posts) { 
     return posts.comments <= 10 && posts.views <= 9000 && posts.title.length >= 40; 
    }; 

    var init = function() { 
     PostsFactory.getPosts.success(function(data) { 
     $scope.posts = data; 
     }); 
    }; 

    init(); 
    }]);

ici est ma partie qui détient les deux directives:

<div class="container"> 
    <top-posts ng-show='showTopPosts'></top-posts> 
    <other-posts ng-show='showOtherPosts'></other-posts> 
</div>

et est mon index.html ici:

<body ng-controller='PostsController'> 
<nav class="navbar navbar-inverse navbar-static-top" role="navigation"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="/main"></a> 
    </div> <!-- END NAVBAR-HEADER --> 
    </div> <!-- END CONTAINER-FLUID --> 
</nav> 

<div class="container"> 
    <div class="btn-group" role="group"> 
    <button type="button" class="btn btn-default" ng-click="topPosts()">Top Posts</button> 
    <button type="button" class="btn btn-default" ng-click="otherPosts()">Other Posts</button> 
    <!-- <button type="button" class="btn btn-default" ng-click="dailyTopPost()">Daily Top Post</button> --> 
    </div> 
</div> 

<div ng-view class='slide-animation'></div>

Ce qui est cur Il arrive que les fonctions soient appelées, mais les directives ne s'affichent pas/se cachent sur les clics.

Source

2016-11-02 hashrocket

Quel est le problème. Est-ce que ça ne marche pas? –

Je ne reçois aucune erreur. Les directives ne s'affichent pas/se cachent sur les clics de bouton. – hashrocket

Juste pour vérifier ... avez-vous essayé de les placer dans un div et le 'ng-show' ou' ng-if' sur ce div? –

Je mets le code de travail dans un codepen et il semble fonctionner très bien http://codepen.io/arthur_souviron/pen/pEMMaJ/

Je pense que votre question vient de la façon dont vous stockez $scope.showTopPosts et $scope.showOtherPosts. Essayez de les stocker dans un objet au lieu de les mettre directement sous $scope

Par exemple: $scope.data = { showTopPosts: true, showTopPosts: false }

et dans votre modèle: <top-posts ng-show="data.showTopPosts"></top-posts>

Source

2016-11-02 05:25:01

ajoutez simplement div avant que la directive:

<div class="container"> 
    <div ng-show='showTopPosts'><top-posts ></top-posts></div> 
    <div ng-show='showOtherPosts'><other-posts ></other-posts></div> 
</div>

Source

2016-11-03 11:47:07 IftekharDani

Afficher/Masquer la directive angulaire sur le bouton Cliquez sur

Répondre

Questions connexes