Question

所以这段代码基本上创建了一个带有关闭链接的元素的指令。

有一个ng-click，其中包含一个close（）函数。在关闭事件期间发生的过程是什么，如下所述？我无法找到控制器中的关闭功能？

helloWorldControllers.controller("alertCtrl", function ($scope) {
$scope.showAlert = true;
$scope.alertTopic = "Something went wrong!";
$scope.alertMessage = "You must inform the plate and the color of the car!";
$scope.closeAlert = function () {
    $scope.showAlert = false;
};
});
helloWorldControllers.directive("alert", function () {
return {
    scope: {
        topic: '=topic',
        description: '=description',
        close: '&close'
    },
    restrict: 'E',
    template: "<div class='alert' style='color: #FF0000; position: absolute; top:0px; left: 0px; padding: 50px; background-color: #FFFFFF' >" +
    "<span class='alert-topic' ng-class='cName'>" +
    '<span ng-bind="topic"></span>' +
      "</span>" +
    "<span class='alert-description'>" +
    '<span ng-bind="description"></span>' +
    "</span>" +
    '<a href="" ng-click="close()">Close</a>' +
    "</div>"
};
});

<div ng-controller="alertCtrl"> <alert ng-show="showAlert" topic="alertTopic" description="descriptionTopic" close="closeAlert()" > </alert> </div>

Answer 1

该指令接受一个名为close的表达式，该表达式由Angular包装为函数：

scope: {
    // ...
    close: '&close'
},

在这种情况下，您可以传入控制器上定义的closeAlert功能，并使用ng-if（或ng-show）来控制可见性：

<alert ng-if="showAlert" close="closeAlert()"></alert>

另请注意，由于close属性及其值（&close）具有相同的名称，因此您可以这样做：

scope: {
    // ...
    close: '&'
},

Answer 2

来自docs：

&绑定允许指令触发对a的评估在特定时间在原始范围的上下文中表达。允许任何合法表达，包括表达式包含函数调用。因此，&绑定是理想的选择将回调函数绑定到指令行为。

当用户在警报中单击“关闭”时，由于ng-click，将调用指令的close函数。对隔离范围的close调用实际上会在原始范围的上下文中计算表达式closeAlert()，因此运行closeAlert控制器的alertCtrl函数，假设它像close="closeAlert()"一样被传递。

该指令如何结束？

2 个答案: