angularjs - 在没有隔离范围的情况下将变量传递给 AngularJS 指令

Question

我正在学习 AngularJS 指令，我想做的一件事是传递一些变量 $scope.message在父 scope ( scope 的 controller )，我希望将其重命名为 param里面directive alert .我可以用一个孤立的范围来做到这一点:

<div alert param="message"></div>

并定义

.directive("alert", function(){
    return{
        restrict: "A",
        scope: {
            param: "="
        },
        link: function(scope){
            console.log(scope.param) # log the message correctly
        }
    }
})

但是我可以在不使用隔离范围的情况下做到这一点吗？假设我想添加另一个 directive toast到 <div toast alert></div>并使用相同的 param (保持2路数据绑定(bind))，天真我会做

.directive("toast", function(){
    return{
        restrict: "A",
        scope: {
            param: "="
        },
        link: function(scope){
            console.log(scope.param)
        }
    }
})

我肯定会得到一个错误 Multiple directives [alert, toast] asking for new/isolated scope on:<div...
所以总而言之，我的问题是，如何在没有隔离范围的情况下重命名父范围变量，以及两个 directives 时如何共享变量放置在单个 DOM ?

Answer 1

修改你的 toast 指令:

.directive("toast", function(){
    return{
        restrict: "A",
        link: function(scope, elem, attrs){
            var param = scope.$eval(attrs.param);
            console.log(param)
        }
    }
})

Example fiddle .

由于 toast 现在与父级在同一范围内(如果允许它是隔离范围)，您可以简单地使用 param 属性在范围上调用 $eval 来获取值。