值不传递给指令 - AngularJS

时间:2013-12-17 13:01:45

标签: javascript angularjs

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>

2 个答案:

答案 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;