对于具有多个模板的弹出窗口,我有以下指令:
app.directive('popup', function ($http, $rootScope, $templateCache, $compile, $parse, Popup) {
return {
link: function ($scope, $element, $attrs) {
$element.bind('click', function () {
var data = {
index: $attrs.index
}
$http.get('/partial/' + $attrs.popup + '.html', {cache: $templateCache}).success(function (tplContent) {
var mainElement = angular.element(document.getElementById('main'));
mainElement.append($compile(tplContent)($scope));
Popup.show(data);
});
});
}
}
});
我已将 visibility
标志固定到 $rootScope
(以使弹出窗口通过 css 可见)以及数据对象中的索引和项目。弹出模板如下所示:
<section class="popup" ng-class="{'show': popup.visibility}">
<h1>{{data[popup.index].title}}<h1>
<p>{{data[popup.index].message}}<p>
</section>
该指令加载弹出模板并将其附加到我的 mainElement
,但不应用范围。因此不会出现弹出窗口,并且没有数据绑定(bind)到它。
最佳答案
编译时需要传递 $scope.$parent 而不是 $scope 。因为你在子 $scope 中。
关于angularjs - $scope 不适用于指令中已编译的模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28043360/