如何通过范围为指令传递变量 [英] How to pass a variable through scope into directive
问题描述
中的元素指令名为标签集，我使用元素指令名为设置页这需要两次标签集。结果
我做的标签集的console.log（attr.newvar）从链接 code>。结果 newvar 是传递到标签集指令的范围值。搜索结果
所以标签集被调用2次（我猜想是正确的），因此输出为控制台 D两次。结果
1时，控制台输出给正确的输出，但第二次它显示 newvar 作为不确定的。结果
但我不能够访问 newvar 到 scope.newvar 。在未定义的两倍。结果
为什么会出现这种情况？
HTML代码段
＆LT;标签集newvar =黑＆GT;
＆LT;标签＆gt;＆LT; /标签＆gt;
＆LT;标签＆gt;＆LT; /标签＆gt;
＆LT; /标签集＆GT;
JS代码片段
.directive（'标签'，函数（）{
返回{
限制：'E'，
要求：'^标签集，
transclude：真实，
范围：{
标题：@
}，
模板：'＆LT; DIV NG秀=活动NG-transclude＆GT;＆LT; / DIV＆GT;，
链接：功能（范围，ELEM，ATTR，tabsetCtrl）{
scope.active = FALSE;
tabsetCtrl.add（范围）;
}
}
}）
.directive（'标签集'，函数（）{
返回{
限制：'E'，
范围：{
项目：=，
newvar：@
}，
transclude：真实，
templateUrl：'/谐音/标签集/ tabset.html'，
bindToController：真实，
controllerAs：标签集，
控制器：函数（$范围）{ VAR自我=这一点;
self.tabs = []
self.add =函数add（标签）{
self.tabs.push（标签）;
如果（self.tabs.length === 1）{
tab.active = TRUE;
}
} self.click =功能键（selectedTab）{
angular.forEach（self.tabs，功能（标签）{
如果（tab.active＆安培;＆安培;！选项卡== selectedTab）
tab.active = FALSE;
}）
selectedTab.active = TRUE;
}
}，
链接：功能（范围，ELEM，ATTR，optionsCtrl）{
的console.log（scope.newvar）
scope.resetInput =功能（）{
的console.log（在resetInput）
optionsCtrl.firstBox =E
scope.item =;
}
}
}
}）
标签集模板
＆LT; UL类=净值资产净值的选项卡NG-CLASS ='{{newvar}}'＆GT;
＆LT;李类=''NG重复=选项卡tabset.tabs＆GT;
＆LT; A HREF =NG点击=tabset.click（标签）; resetInput（）; NG-CLASS ='{选项卡 - 主动：tab.active选项卡，禁用：tab.active ===假}'＆GT; {{tab.heading}}＆下; / A＆GT;
＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; NG-transclude＆GT;
＆LT; / NG-transclude＆GT;
由于您使用的是 bindToController：真正的，你可以访问你这是链接功能第四个参数控制器范围控制器，它会给你访问的指令控制器这个这在它是使用 controllerAs 语法。
链接：功能（范围，ELEM，ATTR，CTRL）{
的console.log（ctrl.newvar）;
//ctrl.newvar = attr.newvar;
}
更新
作为要添加类的设置页 UL 元素。我认为你不应该使用纳克级那里。 纳克级使用时有条件地显示 / 隐藏的任何类在HTML中。您应该使用平面 {{}} 插在你的类属性。当访问范围的变量，你需要使用标签集。，因为你正在使用 controllerAs 语法与它的别名。我试图用 NG-ATTR级添加类，但该类被添加，但被越来越删除的其他两类净值资产净值标签页这是用背后的原因 {{} tabset.newvar} 。
模板
＆LT; UL类=净值资产净值的选项卡{{tabset.newvar}}＆GT;
＆LT;李类=''NG重复=选项卡tabset.tabs＆GT;
＆LT; A HREF =NG点击=tabset.click（标签）; resetInput（）; NG-CLASS ='{选项卡 - 主动：tab.active选项卡，禁用：tab.active ===假}'＆GT; {{tab.heading}}＆下; / A＆GT;
＆LT; /李＆GT;
＆LT; / UL＆GT;
Inside an element directive named tabset, i am using element directive named tab twice which requires tabset.
I am doing a console.log(attr.newvar) from link of tabset.
newvar is the value passed into the scope of the tabset directive.
So the tabset gets called 2 times (which i suppose is correct), and hence output is consoled twice.
1st time, the console output is giving the correct output, but the 2nd time it is showing newvar as undefined .
but i am not able to access newvar through scope.newvar.In case of console.log(scope.newvar), i get output as undefined twice.
Why is this happening ?
HTML snippet
<tabset newvar="black">
<tab></tab>
<tab></tab>
</tabset>
JS snippet
.directive('tab',function(){
return{
restrict:'E',
require:'^tabset',
transclude:true,
scope:{
heading:"@"
},
template:'<div ng-show="active" ng-transclude></div>',
link:function(scope,elem,attr,tabsetCtrl){
scope.active = false;
tabsetCtrl.add(scope);
}
}
})
.directive('tabset',function(){
return{
restrict:'E',
scope:{
item:"=",
newvar:"@"
},
transclude:true,
templateUrl:'/partials/tabset/tabset.html',
bindToController:true,
controllerAs:'tabset',
controller:function($scope){
var self = this;
self.tabs = []
self.add = function add(tab){
self.tabs.push(tab);
if(self.tabs.length === 1){
tab.active = true;
}
}
self.click = function click(selectedTab){
angular.forEach(self.tabs,function(tab){
if(tab.active && tab !== selectedTab)
tab.active = false;
})
selectedTab.active = true;
}
},
link:function(scope,elem,attr,optionsCtrl){
console.log(scope.newvar)
scope.resetInput = function(){
console.log("in resetInput")
optionsCtrl.firstBox = "e"
scope.item = "";
}
}
}
})
tabset template
<ul class="nav nav-tabs" ng-class="'{{newvar}}'" >
<li class='' ng-repeat="tab in tabset.tabs" >
<a href="" ng-click="tabset.click(tab);resetInput();" ng-class='{"tab-active":tab.active,"tab-inactive":tab.active === false}'> {{tab.heading}}</a>
</li>
</ul>
<ng-transclude>
</ng-transclude>
As you are using bindToController: true you could access you controller scope from link function 4th parameter which is controller, which will give you access to the directive controller this which is using controllerAs syntax in it.
link: function(scope, elem, attr, ctrl) {
console.log(ctrl.newvar);
//ctrl.newvar = attr.newvar;
}
Update
As you want to add class to your tab ul element. I think you shouldn't use ng-class there. ng-class used when conditionally show/hide any class in html. You should use plane {{}} interpolation in you class attribute. While accessing scope variable you need to use tabset. because you are using controllerAs syntax with its alias. I tried to add class with ng-attr-class but the class gets added but other two classes was getting removed nav nav tabs that's the reason behind using {{tabset.newvar}}.
Template
<ul class="nav nav-tabs {{tabset.newvar}}">
<li class='' ng-repeat="tab in tabset.tabs" >
<a href="" ng-click="tabset.click(tab);resetInput();" ng-class='{"tab-active":tab.active,"tab-inactive":tab.active === false}'> {{tab.heading}}</a>
</li>
</ul>
这篇关于如何通过范围为指令传递变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
