带有隔离HTML的指令隔离范围
[英]Directive isolated scope with transcluded HTML
问题描述
I am running into some issue regarding isolated scopes. 
我遇到了一些与孤立范围有关的问题。 I have a directive which i need to use at many places and its controller has some helper functions for the directive. 我有一个需要在许多地方使用的指令，它的控制器为该指令提供了一些辅助功能。 The directive does create isolated scopes but the template refers to the parent scope. 该指令的确创建了隔离范围，但模板引用了父范围。 Below is a plunk to demo that issue 下面是演示该问题的一个小贴士
http://plnkr.co/edit/LQnlSjMHeatMkmkYZyfk http://plnkr.co/edit/LQnlSjMHeatMkmkYZyfk
$scope.text = "test";
is to demo that the property does not change in the isolated scope and refers to the parent scope. 旨在演示该属性在隔离范围内没有更改，并引用了父范围。 Due to this issue i am unable to call the helper functions for each isolated scope. 由于这个问题，我无法为每个隔离的范围调用辅助函数。 I hope I am able to describe my problem properly. 我希望我能够正确地描述我的问题。
Below is the code 下面是代码
HTML: HTML：
<body ng-controller="MainCtrl">
<div transfer-box style="">
{{text}}
<div ng-if="refresh" ></div>
{{refresh}}
</div>
<div transfer-box style="">
{{text}}
<div ng-if="refresh" ></div>
{{refresh}}
</div>
</body>
Javascript: 使用Javascript：
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.text = 'World';
console.log("parent scope id "+ $scope.$id);
});
app.directive('transferBox', function() {
return {
restrict: 'EA',
xreplace: true,
transclude: true,
scope:true,
template: '<div class="container-fluid" style="height:100%" ng-transclude></div>',
controller:'transferBoxCtrl'
};
})
app.controller('transferBoxCtrl',['$scope',function($scope){
console.log($scope.$id);
$scope.refresh = true;
$scope.text = "test";
}])
3 个解决方案
解决方案1
1 2015-07-16 13:35:23
You haven't created an isolate scope. 您尚未创建隔离范围。 You need to pass an object to the scope property like this for example: 您需要像这样将对象传递给scope属性：
app.directive('transferBox', function() {
return {
restrict: 'EA',
xreplace: true,
transclude: true,
// create an isolate scope
scope:{
text: '=?'
},
template: '<h1>{{text}}</div>',
// define directive controller within the directive definition
controller: function($scope){
$scope.text = $scope.text || 'default'
}
};
});
index.html 的index.html
<body ng-controller="MainCtrl">
<div transfer-box text="text" ></div>
<div transfer-box ></div>
</body>
Notice, also, that the controller is defined within he directive definition so no need for any calls to app.controller() . 还要注意，控制器是在指令定义中定义的，因此不需要对app.controller()任何调用。
Read the docs regarding the 'Directive Definition Object' for more details on how to define an isolate scope. 阅读有关“指令定义对象”的文档 ，以获取有关如何定义隔离范围的更多详细信息。
DEMO - shows a modified version of your code showing how you might implement an isolate scope shared between directive and parent controller. DEMO-显示代码的修改版本，显示如何实现指令与父控制器之间共享的隔离范围。
解决方案2
0 2015-07-16 14:05:22
This is not possible because angular load child first, here transfer-box directive is a child and then MainCtrl controller which is parent. 这是不可能的，因为首先是角负荷子级，这里的transfer-box指令是子级，然后是父级的MainCtrl控制器。
So child variable always get replaced by parent. 因此，子变量始终被父变量替换。
Solution provided by Matt Herbstritt is great. Matt Herbstritt提供的解决方案很棒。
Thank you 谢谢
解决方案3
0 已采纳 2015-07-17 03:20:35
The issue was with transcluded HTML. 问题在于嵌入的HTML。 I found a link with exactly the same description about the issue I am facing. 我找到了一个链接，其中包含与我所面临的问题完全相同的描述。 I will give it a try but just posting it for others reference. 我会尝试一下，只是将其发布以供其他参考。
http://angular-tips.com/blog/2014/03/transclusion-and-scopes/ http://angular-tips.com/blog/2014/03/transclusion-and-scopes/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.