值未传递给指令-AngularJS

Question

isHidden值无法传递到我的指令，因此我的动画无法正常工作。

我已经在console.log上记录了所有内容，并且在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
    }
});

演示小提琴

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;在您的控制器中的用法 。