Angularjs $scope不';t应用于指令中编译的模板
对于带有多个模板的弹出窗口,我有以下指令:Angularjs $scope不';t应用于指令中编译的模板,angularjs,angularjs-directive,Angularjs,Angularjs Directive,对于带有多个模板的弹出窗口,我有以下指令: app.directive('popup', function ($http, $rootScope, $templateCache, $compile, $parse, Popup) { return { link: function ($scope, $element, $attrs) { $element.bind('click', function () { var dat
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);
});
});
}
}
});
我已经将
可见性
标记固定到$rootScope
(通过css使弹出窗口可见)以及数据对象中的索引和项。弹出式模板如下所示:
{{data[popup.index].title}
{{data[popup.index].message}}
该指令加载弹出式模板并将其附加到my
mainElement
,但不将作用域应用于。因此,弹出窗口不会出现,并且没有数据绑定到它。您需要传递$scope.$parent而不是$scope进行编译。因为您在child$范围内
<section class="popup" ng-class="{'show': popup.visibility}">
<h1>{{data[popup.index].title}}<h1>
<p>{{data[popup.index].message}}<p>
</section>