模板中带有 js-call 的指令 - 方法未被调用

Question

在我的 angular 应用程序中，我有一个警报服务，它处理警报列表。然后我有一个指令，它将所有警报呈现到页面。我使用 UI Bootstrap 组件。

但是，alert的关闭按钮并没有调用方法：

.directive('someAlert', ['alertService', function (alertService){
        var templateString = '<uib-alert ng-repeat="alert in vm.alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</uib-alert>';
    return {
        restrict: 'E',
        template: templateString,
        scope: true, 
        controller: function(){
            var vm = this;

            vm.alerts = alertService.get();

            vm.closeAlert = function (index) {
                console.log('closeAlert within directive controller called');
                alertService.closeAlertIdx(index);
            }
        },
        controllerAs: 'vm',
        replace: true
    }
}]);

Answer 1

在 templateString

试试这个

close="vm.closeAlert($index)"

Answer 2

我直接在警报实例中添加了一个关闭方法。然后 alert.close() 按预期工作。找到了很好的解决方案：alertservice and a slightly modified

模板中带有 js-call 的指令 - 方法未被调用

Directive with js-call in the template - method does not get called

angularjs-directive

angular-ui-bootstrap