Javascript 访问指令内的父作用域
我有两个指令,其中一个相互嵌套:Javascript 访问指令内的父作用域,javascript,angularjs,angularjs-directive,angularjs-scope,Javascript,Angularjs,Angularjs Directive,Angularjs Scope,我有两个指令,其中一个相互嵌套: <envato class="container content-view-container" data-ng-cloak data-ng-hide="spinner"> <items data-ng-repeat="items in marketplaces"></items> </envato> 上面的许多代码可能没有多大意义,因为它是更大应用程序的一部分,但我希望它能解决我的问题。我试图做的是将指
<envato class="container content-view-container" data-ng-cloak data-ng-hide="spinner">
<items data-ng-repeat="items in marketplaces"></items>
</envato>
上面的许多代码可能没有多大意义,因为它是更大应用程序的一部分,但我希望它能解决我的问题。我试图做的是将指令envato
的scope属性从指令items
更改为scope属性。因为我有一个迭代,我想知道它什么时候完成,这样我就可以在迭代期间对附加的DOM元素执行另一个操作
例如,假设我将在指令envato
中定义scope.swip
,并观察其变化。在指令items
中,我将观察ng repeat
何时完成,然后更改上述定义的范围属性scope.swipe
。这将触发指令envato
中的更改,现在我知道我可以执行我的操作了
我希望我足够清楚,如果不清楚,我可以尝试编写更多的代码,或者我会尝试更具体一些。我怎样才能实现我刚才所说的
编辑:我知道使用:
console.log(angular.element(element.parent()).scope())指令项中的code>将为我提供envato
指令的范围,但我想知道是否有更好的方法。使用项
指令,让角度为您解析。我想您正在寻找一个在ng repeat
完成时调用的回调。如果那是你想要的,我已经做了一把小提琴
没有太多的用户界面。请打开firebug控制台,再次运行小提琴。你会看到一个日志。在指令单元格
中定义的ng repeat
末尾调用该日志
$scope.rowDone=function(){
console.log($scope)
}
这是在row指令上定义的回调函数,当cell指令的ng repeat
完成时将调用该函数
它是以这种方式注册的
免责声明:我也是angularjs的新手。对于这种指令间通信,我建议在envato
指令上定义一个API/方法,您的items
指令可以调用该API/方法
var EnvatoAPIController = function($scope) {
...
this.doSomething = function() { ... }
}
您的items
指令已经需要envato
指令,因此在items
指令的link函数中,只要在适当的时候调用API即可:
require : "^envato",
link : function(scope, element, attrs, EnvatoCtrl) {
...
if(scope.$last) {
EnvatoCtrl.doSomething();
}
}
这种方法的优点在于,即使有一天您决定在指令中使用隔离作用域,它也会起作用
AngularJS主页上的选项卡
和窗格
指令使用这种通信机制。有关更多信息,请参阅。另请参见John的。我喜欢Mark的答案,但我最终创建了一个属性指令,将元素指令的范围保存到根范围,如下所示:
myApp.directive('gScope', function(){
return {
restrict: 'A',
replace: false,
transclude: false,
controller: "DirectiveCntl",
link: function(scope, element, attrs, controller) {
controller.saveScope(attrs.gScope);
}
}
});
...
function DirectiveCntl($scope, $rootScope) {
this.saveScope = function(id) {
if($rootScope.directiveScope == undefined) {
$rootScope.directiveScope = [];
}
$rootScope.directiveScope[id] = $scope;
};
}
...
<span>Now I can access the message here: {{directiveScope['myScopeId'].message}}</span>
<other-directive>
<other-directive g-scope="myScopeId" ng-model="message"></other-directive>
</other-directive>
myApp.directive('gScope',function(){
返回{
限制:“A”,
替换:false,
排除:错误,
控制器:“DirectiveCntl”,
链接:功能(范围、元素、属性、控制器){
controller.saveScope(attrs.gScope);
}
}
});
...
函数DirectiveCntl($scope,$rootScope){
this.saveScope=函数(id){
if($rootScope.directiveScope==未定义){
$rootScope.directiveScope=[];
}
$rootScope.directiveScope[id]=$scope;
};
}
...
现在我可以在这里访问消息:{directiveScope['myScopeId'].message}
注意:虽然这使得从所有不同的指令中收集数据变得很容易,但我要提醒您,现在您必须确保正确管理潜在的作用域堆,以避免在页面上造成内存泄漏。特别是如果您正在使用ng view创建一个单页应用程序。Hmmm您似乎在试图给自己制造麻烦。在指令中,您没有设置范围属性:
var object = {
restrict : "E",
transclude : true,
replace : true,
scope: true,
...
设置作用域:{}将为您的指令提供一个完全隔离的新作用域
但是设置scope:true将为您的指令提供一个完全隔离的、继承父级的新范围
我使用此方法将模型包含在顶级父指令中,并允许它向下过滤所有子指令。我可以对其应用新值吗?是的,您可以计算任何值。您甚至可以传递本地值:scope.$eval('scopeValue+localValue',{localValue:15})
。请注意,在分配时,子作用域的值将发生更改,而不是父作用域。在这种情况下,您应该在父级使用一个函数来允许您更改值(即scope.$eval('changeValue(12345)')
)。查看有关作用域继承的更多信息。阅读ng repeat docs。我明白了,所以如果我在父指令envato
中观察ecount
属性:scope.$watch(“count”,function(old,current,s){console.log(old,current,s);})代码>;这块表能看到零钱,对吗?实际上,count
只是一个例子,我只会将属性从false设置为true,以便继续执行另一个操作(或者任何告诉我可以在将模板附加到DOM/中渲染后继续应用需要应用的函数的值)。在这种情况下,使用$eval
更改它的正确表达式是什么?我刚刚尝试了范围。$eval('swipe=true')
,但这一个只是将属性滑动
添加到我的项目
范围,而不是父范围(envato
范围)。使用$apply()
,我读到它比$eval
更可取。我确实从你的评论中得到了一个好消息,使用了scope.$last
如果我在上一次迭代中,它会给我一个true(这非常有用,因为我刚刚使用了
var object = {
restrict : "E",
transclude : true,
replace : true,
scope: true,
...