如何在Angularjs中定义获取参数并使用 ngIf或ngRepeat 转换子元素的指令?
可以在此处找到问题的完整演示 - http://jsfiddle.net/2aa47/4/。这是HTML:
<div ng-controller='myController'>
<my-directive condition="flag">
Both 'flag' and 'a' are defined on controller's scope.
Hi. {{a}} -> Nothing is shown after 'Hi'.
</my-directive>
</div>
和脚本。在我真正的问题中,我有一个非常大的模板,中间有ngIf。
app.directive('myDirective', function () {
return {
restrict: 'E',
transclude: true,
scope: { condition: '=condition' },
template: '<div ng-if="condition" ng-transclude></div>'
};
});
为了获取参数指令,应创建一个隔离的范围。 ngIf,ngRepeat和其他类似指令都将创建一个从该隔离范围继承的范围。然后,被转换的元素将范围兄弟带到后者,意味着直接在指令的孤立的一个:
Controller's scope
Directive's isolated scope
Scope created by ngIf
Element transcluded by directive. Should be directly under controller's scope
现在指令中的被转换元素无法访问控制器的范围。如何减轻这个?
作为参考,Angular项目出现了这样的问题 - https://github.com/angular/angular.js/issues/1809。
答案 0 :(得分:4)
我已经为这个here找到了解决方法。
通过将setTransscope
注入到您的指令中并在链接阶段调用它,将正确的范围标记为transcluding。不应在模板中使用ng-transclude
指令,而应使用ng-transscope
指令,这将恢复先前标记的范围。
<强>指令强>
myApp.directive('myDirective', function(setTransscope) {
return {
scope: {
display: "="
},
transclude: true, // required
restrict: 'EA',
templateUrl: 'my-template.html',
link: setTransscope
/* ... or call within your own link function:
link: function($scope, $element) {
setTransscope($scope, $element);
// ...
// Other stuff
// ...
} */
};
});
<强>模板强>
<div ng-if="display">
<div ng-transscope></div>
</div>