为什么`replace：true`在AngularJS指令中不推荐使用

Question

我正在使用angularjs处理一个使用元素指令的示例播放器。我希望指令模板中的事件仍然包含在指令中。换句话说，如何在指令中使用控制器来创建仅限于指令模板中元素的事件。

指令：

logsApp.directive('logPlayer', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {audio: '='},
        template: '<div ng-repeat="sample in audio">' +
            '{{sample.title}}' +
            '<button type="button" class="btn btn-default" ng-click="play()">Play</button>' +
            '<button type="button" class="btn btn-danger" ng-click="stop()">Stop</button>' +
            '</div>'
    };
});

我可以让ng-click事件发挥作用的唯一方法是将事件方法放在父控制器的$scope中：

logsApp.controller('LogListController', ['$scope', '$rootScope', 'LogsService', 'SoundManager', function($scope, $rootScope, LogsService, SoundManager) {
    ...
    $scope.play = function() {
    SoundManager.sound.createSound({
        id: SoundManager.idPrefix + this.sample.id,
        url: this.sample.filename,
        autoLoad: true,
        autoPlay: false,
        onload: function() {
            this.setPosition(0);
            this.play({
                whileplaying: function() {
                    ...
                }
            });
        }
    });
};

$scope.stop = function() {
    SoundManager.sound.stopAll();
};

如何让play()和stop()事件包含在指令控制器中？

Answer 1

当我为指令创建一个控制器，并应用$scope.play = function() {};没有任何反应。

您遇到的问题是您使用的是不推荐使用的replace: true。删除它，您的指令的控制器将看到单击事件。

angular.module("myApp").directive('logPlayer', function() {
    return {
        restrict: 'E',
        //replace: true,
        scope: {audio: '='},
        controller: function($scope) {
            $scope.play = function(index) {
                console.log("play clicked "+index);
            };
        },
        template: '<div ng-repeat="sample in audio">' +
        '{{sample.title}}' +
        '<button type="button" ng-click="play($index)">Play</button>' +
        '<button type="button" ng-click="stop($index)">Stop</button>' +
        '</div>'
    };
});

DEMO on JSFiddle。

来自Docs：