CODEWITHSUNDEEP
angularjsangularjs-directive
Shruthi
Shruthi

Reputation: 25

ng-show doesn't work when used with custom directives

I am trying to hide the text when clicked on Close link which is in the template by executing it within the context of the parent scope. But it doesn't work. Can someone tell me where I went wrong.

<!doctype html>
<html ng-app="parking">
<head>
    <title>Parking</title>
    <script src="https://code.angularjs.org/1.3.14/angular.min.js"></script>
    <script>
        var app=angular.module('parking', []);
        app.controller('parkingCtrl', function($scope){
            $scope.show=true;
            $scope.alertTopic="Something went Wrong!";
            $scope.alertDescription="Try Again!";
            $scope.closeAlert=function(){
                $scope.show=false;
            };
        });
        app.directive('alert', function(){
            return {
                templateUrl:"alert.html",
                restrict: "E",
                replace: true,
                scope: {
                    topic: "=topic",
                    description: "=description",
                    close: "&close"
                }
            };
        });
    </script>
</head>
<body ng-controller="parkingCtrl">
    <alert
        ng-show="show"
        topic="alertTopic"
        description="alertDescription"
        close="closeAlert"
    ></alert>
</body>
</html>

<!--alert.html-->
<div class="alert">
    <span class="alert-topic">
     <span ng-bind="topic"></span>
    </span>
    <span class="alert-description">
    <span ng-bind="description"></span>
    </span>
    <a href="" ng-click="close()">Close</a>
</div>

Upvotes: 0

Views: 72

Answers (1)

Alexander Strochkov
Alexander Strochkov

Reputation: 417

You need to change close="closeAlert" to close="closeAlert()" like:

<alert
    ng-show="show"
    topic="alertTopic"
    description="alertDescription"
    close="closeAlert()"
></alert>

Because angular It wraps your function with another function if you use & char example

Upvotes: 1

Related Questions