Search code examples
angularjstemplatesng-hideangularjs-ng-include

Angularjs ng-hide not working with ng-include template


Can anybody help me. In index.html, I run ng-view, which code corresponds to Routing.js file. The menu calls two pages main.html and product.htm. main.htm, has included another page called filterApp.html. I need to hide a page element that is embedded main.html the filterApp.html. I have not succeeded. If I take the include and put the code directly into main.html works. I read that ng-ng-hide and include not working properly. Is there anything I can do. I need to have it in separate files. Here is the code of the pages. Thank you so much

Index.html

<html ng-app="appDataBoard">
<body ng-controller="mainController" >
 <ul >
          <li class="nav-item start open">
              <a href="#/main" class="nav-link nav-toggle"></a>
             </li>
               <li class="nav-item  ">
                            <a href="#/product" class="nav-link nav-toggle"> </a>
                 </li>
        </ul>

<div class="col-md-12 column sortable">
                           <div ng-view></div>
                </div>
</body>
</html>

Main.html

<div class="jumbotron text-center">
    <h1>main  Page</h1>

    <p>{{ message }}</p>
</div>

<!-- INCLUDE FILTER APPS-->
        <div ng-include="'./template/filterApp.html'" ></div>

Product.html

<div class="jumbotron text-center">
    <h1>Product Page</h1>

    <p>{{ message }}</p>
p ng-hide="hide1">este parrafo se debe borrar</p>
</div>

filterApp.html

<div ng-hide="hselect1"  >
            <select id="select-1" multiple="multiple" onchange="RecargaSelectBU()" >
            </select>
        </div>

Routing.js

// create the module and name it dbApp
    var dbApp = angular.module('appDataBoard', ['ngRoute']);

    // configure our routes
    dbApp.config(function($routeProvider) {
        $routeProvider

            // route for the home page
            .when('/main', {
                templateUrl : 'template/main.html',
                controller  : 'mainController'
            })

            // route for the about page
            .when('/product', {
                templateUrl : 'template/product.html',
                controller  : 'productController'
            })

    });

    // create the controller and inject Angular's $scope
    dbApp.controller('mainController', function($scope) {
        // create a message to display in our view
        $scope.message = 'Pagina principal';
        $scope.hselect1 = true;
    });

    dbApp.controller('productController', function($scope) {
        $scope.message = 'Pagina de producto.';
        $scope.hide1 = true;

    });

Solution

  • Check this plunker link. Its working fine for me. https://embed.plnkr.co/RZDGdnFEq1SmT7F3ncZa/