与自定义指令一起使用时,ng-show不起作用

时间:2015-08-26 19:06:55

标签: angularjs angularjs-directive

我试图通过在父作用域的上下文中执行它来单击模板中的关闭链接时隐藏文本。但它不起作用。有人能告诉我哪里出错了。

<!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>    

1 个答案:

答案 0 :(得分:1)

您需要将close =“closeAlert”更改为close =“closeAlert()”,如:

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

因为如果使用&amp;,它会将你的功能用另一个功能包裹起来。 char example