Javascript 为什么AngularJS指令中不推荐使用“replace:true”

我正在使用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>'
    };
});

如何将

play（）

和

stop（）

事件包含在指令控制器中

---

当我为指令创建一个控制器，并应用

$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>'
    };
});

angular.module（“myApp”）.directive（'logPlayer'，function（）{
返回{
限制：'E'，
//替换：正确，
作用域：{audio:'='}，
控制器：功能（$scope）{
$scope.play=函数（索引）{
console.log（“点击播放”+索引）；
};
},
模板：“”+
“{sample.title}}”+
“玩”+
“停下来”+
''
};
});

这个

从文档中：

replace
（[DEPRECATED！]将在下一个主要版本（即v2.0）中删除）

指定模板应替换的内容。默认值为
false


true
-模板将替换指令的元素
false
-模板将替换指令元素的内容

--

来自GitHub：

它被弃用是因为
replace:true
中存在一些已知的、非常愚蠢的问题，其中许多问题无法以合理的方式得到解决。如果你小心地避免这些问题，那么你就会有更多的能力，但是为了新用户的利益，告诉他们“这会让你头疼，不要这样做”会更容易

--

在这种情况下，指令的隔离范围与
ng repeat
指令的继承范围对抗。因此，从模板的顶部元素中删除
replace:true
或删除
ng repeat


更新
注意：
replace:true
已弃用，不建议使用，主要原因是此处列出的问题。它已在新的角度完全删除

替换的问题：true





有关更多信息，请参阅。
将控制器添加到指令中。有关更多信息，请参阅。当我为指令创建控制器时，并应用
$scope.play=function（）{}什么也没发生。谢谢工作。这是因为replace在事实发生后更新DOM，并且事件变为未绑定吗？
ng repeat
正在覆盖指令的范围。通常，隔离内部的
ng click
不能通过继承连接到父函数。隔离作用域被
ng repeat
破坏。
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>'
    };
});