Question

我有一个带模板的指令元素。指令模板包含一个带有ng-click的按钮，用于调用控制器中的函数。单击该按钮时，控制器广播事件，指令查找广播。这很好用，但是，我正在为应用程序中使用的每个指令元素收到警报。我只想通过用于单击按钮的指令元素来监听广播。

如何隔离每个实例的指令点击次数？我尝试了许多指令范围途径，但我找不到解决方案。而且，这是用于此目的的最佳解决方案吗？

我在这里创建了一个小提琴：http://jsfiddle.net/mLnspea0/

var app = angular.module('testApp', []);

app.controller('SaveCtrl', function ($scope) {
    $scope.save = function () {
        $scope.$broadcast('saved');
    };
});

app.directive('saveButton', function () {
    return {
        restrict: 'E',
        template: '<div class="container"><button ng-click="save()">Save</button></div>',
        link: function (scope, element, attr) {
            scope.$on('saved', function () {
                alert('saved');
            });
        }
    }
});

感谢您的帮助。

Answer 1

问题是，只要调用它，就会调用指令的link函数。在你的小提琴中，你要两次调用它。这为一个事件创建了两个事件监听器，当您广播事件时，两个侦听器都会接听它，这是您从中获取两个警报的地方。

如果我是你，我会将监听器移出指令并返回控制器。我还将click动作方法注入到指令中，而不是强制指令依赖于父（即控制器）$ scope。分离关注点和所有这些。

http://jsfiddle.net/zejjxd5u/

var app = angular.module('testApp', []);

app.controller('SaveCtrl', function ($scope) {
    $scope.save = function () {
        $scope.$broadcast('saved');
    };

    $scope.$on('saved', function() {
        alert('test');
    });
});

app.directive('saveButton', function () {
    return {
        restrict: 'E',
        template: '<div class="container"><button ng-click="save()">Save</button></div>',
        scope: {
            save: '='
        }
    }
});

Answer 2

如果你在这里举一个关于更大图片的例子会更有帮助。我不会认为您正在以最佳方式使用事件/范围。在指令范围而不是控制器范围中定义save函数可能更有意义。然后您就可以访问被点击的元素。

然后您可以发出事件并在控制器中对其做出反应

例如：

app.directive('saveButton', function () {
    return {
        restrict: 'E',
        template: '<div class="container"><button ng-click="save()">Save</button></div>',
        link: function (scope, element, attr) {
            scope.$on('saved', function () {
                alert('saved');
            });

            scope.save = function() {
               console.log(element, "clicked");
               scope.$emit('element-clicked', element);
            }
        }
    }
});

Answer 3

我根本不会使用活动。为什么不使用自己版本的save函数在指令中使用子作用域，并直接调用它？然后该指令可以随时调用“parent”scope.save（），并在之前或之后运行它需要的任何逻辑。

见这里：http://jsfiddle.net/jxzn6o49/1/

app.directive('saveButton', function () {
    return {
        restrict: 'E',
        template: '<div class="container"><button ng-click="directiveSave()">Save</button></div>',
        scope: true,
        link: function (scope, element, attr) {
            scope.directiveSave = function() {
                scope.save();
                alert( 'after-save logic in directive' );
            }
        }
    }
});

AngularJS多个指令元素，带有模板和来自控制器的广播

3 个答案: