ngShow not working from a template on HTML

Question

I have a problem to show and hide a div from a template on HTML page. here is a simple JSFiddle example Example.

  app.directive('example', function () {

    return {
        restrict: 'E',
        template: '<button ng-click=\"clickMe()\">Click me</button>',
        scope: {
            exampleAttr: '@'
        },
        link: function (scope) {
            scope.clickMe = function () {
        scope.showMe = !scope.showMe;
    };
        }
    };
});

and the HTML is like that :

<body ng-app="demo" ng-controller="exampleController">
<div>
    <div ng-controller="exampleController as ctrl">
        <example example-attr="xxx">
            <p ng-show="showMe">Text to show</p>
        </example>
    </div>
</div>

I cant add my html code to the template like in this example because my div that i want to show or hide is an entire html page.

    app.directive('example', function () {

    return {
        restrict: 'E',
        template: '<p ng-show=\"showMe\">Text to show</p><button ng-click=\"clickMe()\">Click me</button>',
        scope: {
            exampleAttr: '@'
        },
        link: function (scope) {
            scope.clickMe = function () {
        scope.showMe = !scope.showMe;
    };
        }
    };
});

Thanks in advance

Mark Pieszak - Trilon.io · Accepted Answer · 2015-04-07T14:20:11.797

You need to use transclusion if you want to have something within your <example>  </example>, show up once the directive is compiled and created.

Get ride of the scope: {} object within your directive.

jsFiddle demo

app.directive('example', function () {
    return {
        restrict: 'E',

        template: '<div ng-transclude></div><button ng-click="clickMe()">Click me</button>',

        // ^ notice the ng-transclude here, you can place this wherever 
        //you want that HTML to show up

        // scope : {}, <-- remove this
        transclude: true, // <--- transclusion

        // transclude is a "fancy" word for, put those things that are 
        // located inside the directive html inside of the template 
        //at a given location

        link: function (scope) {
            /* this remains the same */
        }
    };
});

This will have it working as intended!

Side note: You don't need to escape \" your double quotes since you have your template inside of a single quote ' <html here> ' string.

Not a problem, glad to help @Ayyoub – Mark Pieszak - Trilon.io Apr 07 '15 at 14:24 — Mark Pieszak - Trilon.io, Apr 07 '15 at 14:24

camden_kid · Answer 2 · 2015-04-07T14:19:47.000

2

You could do it like this - Fiddle

JS

var app = angular.module("demo", [])

app.controller('exampleController', function ($scope) {
    $scope.showMe = false;
});

app.directive('example', function () {

    return {
        restrict: 'E',
        template: '<button ng-click="clickMe()">Click me</button><br>',
        scope: {
            exampleAttr: '@',
            showMe: "="
        },
        link: function (scope) {
            scope.clickMe = function() {
                scope.showMe = !scope.showMe;
            };
        }
    };
});

Markup

<body ng-app="demo" ng-controller="exampleController">
    <div>
        <div ng-controller="exampleController as ctrl">
            <example example-attr="xxx" show-me="showMe"></example>
            <p ng-show="showMe">Text to show</p>
        </div>
    </div>
</body>

edited Apr 07 '15 at 14:19

answered Apr 07 '15 at 14:10

camden_kid

12,591
11
52
88

I mentionned that i can't put it in the template because actually it's an entire html page and i gave just en example :) but the solution given by @mcpDESIGNS is working – Ayyoub Apr 07 '15 at 14:17
@Ayyoub Yeah, I saw that. See update. Glad you found a solution. Mine's an alternative. – camden_kid Apr 07 '15 at 14:18
Yeah i was trying to do like what you did but I couldn't. I can't vote i don't have enough reputation and i don't think i can accept to answers but yours is working too thanks a lot man – Ayyoub Apr 07 '15 at 14:20

ngShow not working from a template on HTML

2 Answers2