Question

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>

Answer 1

我确定这是一个我无法看到它的简单错误。

首先，我会将指令名称改为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

Answer 2

您应该将指令名称从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;。

值不传递给指令 - AngularJS

2 个答案: