[AngularJS]为什么是 '替换︰ 真正' AngularJS Directive 中弃用

发布时间: 2017/4/16 21:39:02
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我正在使用 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() 事件必须包含在指令控制器中?

解决方法 1:

当我创建一个控制器的指令,并应用 $scope.play = function() {}; 什么也没有发生。

您遇到的问题是你正在使用 replace: true ,已被否决。删除,和你指令控制器将看到的 click 事件。

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

在 JSFiddle 上的演示

从文档︰

replace([弃用 !],将被删除下一个主要发行版-即 v2.0)

指定模板应更换。默认值为 false

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

— — AngularJS 综合指令 API

从 GitHub:

Caitp — —它已被否决,因为有已知的、 非常愚蠢的问题 replace: true ,真的不能固定在一种合理的方式的其中一些。如果你小心,避免这些问题,然后给你,更多的权力,但为新用户,它只是更容易告诉他们"这会给你的头痛,不做"。

— — AngularJS 问题 #7636

在这种情况下该指令隔离范围战斗的继承范围 ng-repeat 指令。所以要么删除 replace: true 或删除 ng-repeat 从模板的顶级元素。

赞助商