isHidden值未通过我的指令,因此我的动画无效。
我已经安装了所有内容,似乎在attrs
失败了。
我正在使用角度1.2。
我确定这是一个我无法看到的简单错误。
// Homepage Controller
app.controller('homeCtrl', function($scope, $route, $location) {
isHidden = false;
console.log(isHidden);
$scope.fadeIt = function(){
isHidden = !isHidden;
console.log("clicked");
console.log(isHidden);
}
});
// Directive
app.directive("hideMe", function($animate){
return function (scope, element, attrs){
scope.$watch(attrs.hideMe, function(newVal) {
console.log(newVal);
if (newVal) {
$animate.addClass(element, "fade");
} else {
$animate.removeClass(element, "fade");
}
})
}
});
// Animation
app.animation('.fade', function() {
return {
addClass: function(element, className) {
TweenMax.to(element, 0.5, {opacity:0});
},
removeClass: function(element, className) {
TweenMax.to(element, 0.5, {opacity:1});
}
}
});
模板
<a ng-click="fadeIt()">fade</a>
<div hide-me="app.isHidden">test</div>
答案 0 :(得分:0)
我确定这是一个我无法看到它的简单错误。
首先,我会将指令名称改为hideMe
而不是hide-me
:
app.directive("hideMe", function($animate)
//....
在HTML中时,请保持相同:<div hide-me="isHidden">test</div>
另一方面,您可以编写HTML指令,如:
<div hide-me hide="isHidden">test</div>
控制器
$scope.isHidden = false;
和指令:
// Directive
app.directive("hideMe", function($animate){
return function (scope, element, attrs){
scope.$watch(attrs.hide, function(newVal) {
console.log(newVal);
if (newVal) {
$animate.addClass(element, "fade");
} else {
$animate.removeClass(element, "fade");
}
}, true)// <- deep watch might help too
}
});
演示 Fiddle
答案 1 :(得分:0)
您应该将指令名称从hide-me更改为hideMe,以及更改$scope.watch
语句以使用camelCase版本。以下指令应该有效。
app.directive("hideMe", function($animate){
var link = function (scope, element, attrs){
scope.$watch(attrs.hideMe, function(newVal) {
if (newVal) {
$animate.addClass(element, "fade");
} else {
$animate.removeClass(element, "fade");
}
})
}
return {
link:link
};
});
您可能想要更改html和控制器中引用isHidden的方式。试试这样的事情,
<div ng-controller="homeCtrl">
<a ng-click="fadeIt()">fade</a>
<div hide-me="isHidden">test</div>
</div>
还会将控制器中的isHidden = false;
种用法更改为$scope.isHidden = false;
。