Question

我正在尝试将控制器的变量传递给指令，因此它可以放在指令的模板中。

我有这样的指示：

app.directive('alert', function() {
return {
    restrict: "E",
    replace: true,
    transclude: true,
    templateUrl: "partials/templates/alert.html",
    link: function(scope, element, attrs) {
        scope.type = attrs.type;
    }
};
});

使用这样的模板：

<div class="alert alert-{{type}}">
    <strong ng-if="type">{{type | capitalize}}:</strong> <span ng-transclude></span>
</div>

我使用该指令如下：

 <alert ng-show="alert.message" type="{{alert.type}}">{{alert.message}}</alert>

我的ctrl有一个如下所示的变量：

$scope.alert = {
    type: 'success',
    message: 'alert message'
}

问题是，当我希望它显示为字符串'success'时，指令中的scope.type会一直显示为模板中的字符串'{{alert.type}}'。< / p>

我试过给指令一个隔离范围，如：

scope: {
    type: '@'
}

但是html中的ng-show="alert.message失败了（如果它存在则不会返回true，因此指令永远不会显示），因为该指令失去了对ctrl范围的访问权。

将此变量从控制器传递到指令并对其进行插值的正确方法是什么？

Answer 1

一个笨蛋或小提琴会有所帮助。事情应该没有孤立的范围。我建议你将ng-show移到指令html标签之外，而type属性使用表达式而不用{{}}。像这样的东西

<span ng-show="alert.message">
 <alert type="alert.type">{{alert.message}}</alert>
</span>

然后使用隔离范围方法。

AngularJS：将变量从控制器传递到指令进行插值

1 个答案: