0

我正在尝试将控制器的变量传递到指令中，以便可以将其放置在指令的模板中。

我有一个这样的指令：

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'
}

问题是scope.type在指令中一直显示为模板中的字符串'{{alert.type}}'，而我希望它显示为简单的字符串'success'。

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

scope: {
    type: '@'
}

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

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

4

1 回答 1

0

plunkr 或 fiddle 会有所帮助。这件事也应该在没有孤立范围的情况下工作。我可以建议您将 ng-show 移到指令 html 标记之外，并且类型属性使用没有{{}}. 像这样的东西

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

然后使用隔离范围方法。

于 2013-07-09T03:58:54.963 回答