函数执行无效。

Question

实现点击按钮改变按钮的类名的功能，最后是可以实现的，我想让他最开始默认是第一个，但是并不能成功，这是什么原因呢？

angular.module('app').directive('appPositionClass',[function () {
    return{
        restrict:'A',
        replace:true,
        scope:{
            com:'='
        },
        templateUrl:'view/template/positionClass.html',
        link:function ($scope)
        {
            $scope.showPositionList=function (idx) {
                $scope.positionList=$scope.com.positionClass[idx].positionList;
                $scope.isActive=idx;
            };
            $scope.showPositionList(0);
        }
    };
}]);

控制台报错如下：

Answer 1

directive初始化的时候$scope.com还是undefined，由于$scope.com是由外部

scope:{
    com:'='
}

赋值的，所以你无法保证什么时候有值，比较稳妥的做法可以是加个watch

link:function ($scope)
{
    $scope.showPositionList=function (idx) {
        $scope.positionList=$scope.com.positionClass[idx].positionList;
        $scope.isActive=idx;
    };
    var isInit = true;
    $scope.$watch('com',function(newValue,oldValue, scope){
        if(newValue && isInit){
            isInit = false;
            $scope.showPositionList(0);
        }
    })