Question

在我的标记中，我有一个容器，里面有两个按钮。每个按钮打开相同的弹出窗口，但内容不同。容器和按钮由指令和弹出窗口 - 服务组成。 HTML：

<div my-container>
    <my-button ng-click="openPopup()" popupContent="<popup-content1></popup-content1>"></my-button>
    <my-button ng-click="openPopup()" popupContent="<popup-content2></popup-content1>"></my-button>
    <my-popup></my-popup>
</div>

正如您所看到的，我尝试将一些内容添加到弹出窗口作为属性，属性的值是必须插入DOM的指令的名称。首先，我在my-button指令中获取属性：

//...
link: function(scope, elm, attrs) {
    scope.openPopup()(true, attrs.popupContent);
}
//...

然后我将属性的值传递给my-container指令的控制器到范围：

//...
$scope.openPopup = function(msg, content) {
    //...
    $scope.popupContent = content;
};

然后我尝试在弹出的模板中获取属性的值：

<header> .... </header> 
<ng-transclude>{{ popupContent }}</ng-transclude>
<footer> ... </footer>

所以，问题是我得到了像

这样的字符串

<popup-content1></popup-content1>

在我的弹出窗口中，而不是像“Lorem ipsum ....”这样的真实内容（在我的popup-content1和popup-content2指令模板中）。

如何将“真实”内容放入弹出窗口？
提前谢谢了！

AngularJS |将指令的名称作为属性传递给另一个指令

0 个答案: