javascript - 从指令中删除元素时，AngularJs 会自动销毁范围吗？

Question

假设我有指令:

angular.module('myApp').directive('myDirective', function ($compile) {
    return {
        link: function ($scope, $element, $attrs) {
            var $randomElem = $('<div>');
            $element.append($compile($randomElem)($scope));

            $randomElem.remove();
        }
    }
});

作用域会自动销毁吗？如果没有，我该如何销毁它？

Answer 1

在您的情况下，您的 $randomElem 将与其父级(指令容器)具有相同的范围。所以它不会被破坏。

现在您要为此元素创建一个新范围:

// Case 1: child scope sharing the properties with parent
$element.append($compile($randomElem)($scope.$new()));

// case 2: child scope isolated, no sharing with parent
$element.append($compile($randomElem)($scope.$new(true)));

然后您需要在删除元素时手动销毁作用域。你可以使用 $scope.$destroy()

例如:

var newScope = $scope.$new();
$element.append($compile($randomElem)(newScope));


newScope.$destroy(); // or $randomElem.scope().$destroy();
$randomElem.remove();