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

I have declared two directives on an element: one requesting isolated scope and the other requesting inherited scope. Here is:

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

The Code

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

and the HTML

和HTML

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

But AngularJS is throwing error mentioning the URL:

但AngularJS提出错误提到URL:

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

But in the description of errors, I don't see a point where it says that multiple directives requesting isolated and inherited scope is not allowed.

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

** EDIT ** That seems strange, when I used angular v1.2.0-rc.2, the above scenario works fine. The otherDirective gets an isolated scope even if it asks for the shared scope. But this scenario doesn't works in the latest version.

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

2 个解决方案

#1

You are getting an error because both of your directives are requesting an isolated scope.

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

To resolve this, set the scope option to false on the directive you want no isolated scope on:

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

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

here's a fiddle

这是一个小提琴

Actually, you can omit the scope property for the same effect as well.

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

#2

AngularJS allows only one isolated scope per element. If either if you do

AngularJS每个元素只允许一个隔离范围。如果你这样做的话

scope: true

scope: {/* something */}

inside two directives on the same element, that just means you're requesting two isolated scopes on the same element.

在同一元素的两个指令中,这意味着您在同一元素上请求两个隔离的作用域。

Try with

scope: false

in otherDirective

#1