Angularjs 如何通过作用域将变量传递到指令

在名为

tabset

的元素

directive

中，我使用元素

directive

名为

tab

两次，这需要

tabset

我正在做一个

console.log（attr.newvar）

newvar

是传递到

tabset

指令范围内的值。

因此，

tabset

被调用了2次（我认为这是正确的），因此输出是

console

d两次。

第一次，

控制台

输出给出了正确的输出，但第二次显示

newvar

为未定义。

但是我无法通过

scope.newvar

访问

newvar

。在

console.log（scope.newvar）

的情况下，我会两次以

未定义的
输出。

为什么会这样

HTML代码片段

<tabset newvar="black">
    <tab></tab>
    <tab></tab>
</tabset>

.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 = "";
        }
        }
}
})



JS片段

<tabset newvar="black">
    <tab></tab>
    <tab></tab>
</tabset>

.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 = "";
        }
        }
}
})

指令（'tab'，函数（）{
返回{
限制：'E'，
要求：“^tabset”，
是的，
范围：{
标题：“@”
},
模板：“”，
链接：函数（范围、元素、属性、tabsetCtrl）{
scope.active=false；
tabsetCtrl.add（范围）；
}
}
})
.directive（'tabset'，function（）{
返回{
限制：'E'，
范围：{
项目：“=”，
新变量：“@”
},
是的，
templateUrl:“/partials/tabset/tabset.html”，
bindToController：对，
controllerAs:“tabset”，
控制器：功能（$scope）{
var self=这个；
self.tabs=[]
self.add=函数添加（选项卡）{
self.tabs.push（tab）；
如果（self.tabs.length==1）{
tab.active=true；
}
}
self.click=功能单击（selectedTab）{
angular.forEach（self.tabs、function（tab）{
如果（tab.active&&tab！==selectedTab）
tab.active=false；
})
selectedTab.active=true；
}
},
链接：函数（范围、元素、属性、选项Ctrl）{
console.log（scope.newvar）
scope.resetInput=函数（）{
console.log（“在resetInput中”）
选项Ctrl.firstBox=“e”
scope.item=“”；
}
}
}
})

选项卡集模板

<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>

<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>





当您使用
bindToController:true
时，您可以通过链接函数第四个参数访问控制器作用域，该参数为控制器，您可以访问指令控制器
此
，该指令控制器使用
控制器语法

link: function(scope, elem, attr, ctrl) {
    console.log(ctrl.newvar);
    //ctrl.newvar = attr.newvar;
}

更新

<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>

<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>

当您想将类添加到
选项卡
ul
元素时。我认为你不应该在那里使用ng类<代码>ng类
在html中有条件地显示
/
隐藏
任何类时使用。在类属性中应该使用平面
{{}
插值。在访问范围变量时，您需要使用
tabset.
，因为您使用的是
controllerAs
语法及其别名。我试图添加带有
ngattr class
的类，但该类被添加，但其他两个类被删除
nav nav tabs
，这就是使用
{{tabset.newvar}
的原因

模板

<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>

<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>






您可以使用
scope.tabset
引用控制器，从而访问变量。像这样：

link: function(scope, elem, attr) {
    console.log(scope.tabset.newvar);
}

呃，
var
是一个保留字，是javascript，这不是我用过的名字，不管怎么说edited@dreamer，如果您能给我们更多的代码示例，那将非常有帮助。具体地说，我需要查看您的指令代码。@beaudetious:根据请求编辑的问题我相信您可以将ng class=“{{newvar}}”更改为ng class=“newvar”。这不会解决您的问题，但会清理一些问题。
scope.tabset
从何而来？它是控制器对象，如上面@pankajparkar的响应所示，但我刚刚为您提供了一种通过scope访问它的不同方式。你可能应该接受他的建议，因为这是一种更清晰的方法：-）这看起来像是另一个答案的附录，这通常不是最好的主意。如果可能，重写以使其独立。