难以让JavaScript动画与AngularJS指令一起工作

函数百分比像素（perc）{
返回（$（“.stepNavContainer”）.outerWidth（）/100）*parseFloat（perc）；
}
var app=angular.module（'app'，[“ngAnimate]”）；
app.controller（“appController”，函数（$scope）{
});
指令（“初始模态”，函数（）{
返回{
限制：'E'，
链接：函数（范围、元素、属性）{
scope.init=函数（）{
TweenMax.set（$（“#光标”）{
x:percentToPixel（“0”）+“px”，
X百分比：-50
});
TweenMax.set（$（“#joinModalNavStep1”）{
x:percentToPixel（“0”）+“px”，
X百分比：-50
});
TweenMax.set（$（“#joinModalNavStep2”）{
x：百分比像素（“50”）+“px”，
X百分比：-50
});
TweenMax.set（$（“#joinModalNavStep3”）{
x:percentToPixel（“100”）+“px”，
X百分比：-50
});
};
}
};
});
应用指令（“步骤模式”，函数（）{
返回{
限制：'E'，
链接：函数（范围、元素、属性）{
var tlStepNavAnimation=new TimelineMax（）；
tlStepNavAnimation.to（光标，1{
x:percentToPixel（“0”）+“px”，
X百分比：-50，
放松：后退。放松
});
tlStepNavAnimation.addPause（）；
tlStepNavAnimation.to（光标，1{
x：百分比像素（“50”）+“px”，
X百分比：-50，
放松：后退。放松
});
tlStepNavAnimation.addPause（）；
tlStepNavAnimation.to（光标，1{
x:percentToPixel（“100”）+“px”，
X百分比：-50，
放松：后退。放松
});
scope.play=函数（）{
tlstepnaviation.play（）；
};
scope.reverse=函数（）{
tlStepNavAnimation.reverse（）；
};
}
};
});
html，
身体{
溢出：隐藏；
}
身体{
背景色：白色；
保证金：0；
填充：0；
}
.stepNavContainer{
位置：相对位置；
高度：50px；
宽度：50%；
左：25%；
边框：1px纯红；
}
.圆圈{
显示：块；
位置：绝对位置；
宽度：50px；
高度：50px；
边界半径：50%；
}
#光标{
显示：块；
位置：绝对位置；
宽度：50px；
高度：50px；
背景：#c32026；
边界半径：50%；
}
.步骤{
背景#999999；
}
.btn{
宽度：100px；
高度：50px；
边框：1px纯黑；
}

文件标题
安装程序
以前的
下一个
首先，为指令指定一个camel案例名称：

app.directive("initModal", function() {
  return {
    restrict: 'E',
    link: function(){}
  }
}

限制：'E'=>元素：

限制：“A'=>属性：

限制：“C”=>类名：

非常感谢！骆驼案和限制“A”是我需要让它工作。我很感激。