Question

在名为directive的元素tabset内，我使用名为directive的元素tab两次，需要tabset。
我从console.log(attr.newvar)的{{1}}开始link tabset是传递到newvar指令范围的值。

所以tabset被调用2次（我认为是正确的），因此输出为tabset d两次。

第一次，console输出正在给出正确的输出，但第二次显示console为未定义。

但我无法通过newvar访问newvar。如果是scope.newvar，我的输出为console.log(scope.newvar)两次。

为什么会这样？

HTML代码段

undefined

JS代码段

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

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

Answer 1

当您使用bindToController: true时，您可以从链接功能第4个参数（即控制器）访问控制器范围，这将使您可以访问使用this语法的指令控制器controllerAs在它。

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

<强>更新

您想要在tab ul元素中添加课程。我认为你不应该在那里使用ng-class。有条件ng-class / show html中的任何类时使用的hide。您应该在类属性中使用平面{{}}插值。访问范围变量时，您需要使用tabset.，因为您的别名使用controllerAs语法。我尝试使用ng-attr-class添加类，但添加了类，但其他两个类被删除了nav nav tabs，这是使用{{tabset.newvar}}背后的原因。

<强>模板

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

Working Plunkr

Answer 2

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

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

如何通过范围将变量传递给指令

2 个答案: