Question

我已经在一个元素上声明了两个指令：一个请求隔离范围，另一个请求继承范围。这是：

守则

angular.module("myApp", [])
.directive("myDirective", function() {
    return {
        restrict: "A",
        scope: {
            users: "="
        },
        templateUrl: "users-info.html",
        link: function(scope) {
            scope.title = "From My Directive";
        }
    }
})
.directive("otherDirective", function() {
    return {
        restrict: "A",
        scope: true,
        link: function(scope) {
            scope.title = "From Other Directive";
        }
    };
})
.controller("AppController", function($scope) {
    $scope.users = [
        {name: "Anup Vasudeva", username: "anup_vasudeva"},
        {name: "Ajay Sharma", username: "ajay_sharma"},
        {name: "Vinay Kumar", username: "vinay_kumar"}
    ];
    $scope.title = "Users Information";
});

和HTML

<div my-directive other-directive>{{title}}</div>

但AngularJS提出错误提到了URL：

http://docs.angularjs.org/error/$compile/multidir

但是在对错误的描述中，我没有看到它表示不允许多个指令请求隔离和继承范围。

**编辑** 这看起来很奇怪，当我使用angular v1.2.0-rc.2时，上面的场景运行正常。即使otherDirective要求共享范围，{{1}}也会获得隔离范围。但是这种情况在最新版本中不起作用。

Answer 1

您收到错误，因为您的两个指令都在请求隔离范围。

要解决此问题，请在您不希望隔离范围的指令上将scope选项设置为false：

app.directive("otherDirective", function() {
    return {
        restrict: "A",
        scope: false,
        link: function(scope) {
            scope.title = "From Other Directive";
        }
    };
});

here's a fiddle

实际上，您也可以省略scope属性以获得相同的效果。

Answer 2

AngularJS每个元素只允许一个孤立的范围。如果你做了

scope: true

或

scope: {/* something */}

在同一元素的两个指令中，这意味着你在同一个元素上请求两个独立的作用域。

尝试

scope: false

otherDirective

中的

两个指令在同一元素上请求隔离范围和继承范围

2 个答案: