不能观看角度指令属性

Question

我建立与RequireJs一个AngularJs应用程序，并试图使动画像： https://egghead.io/lessons/angularjs-animating-the-angular-way/

我加载的所有供应商JS文件与HeadJs。

荫面临两个问题： 1）当我点击

富

或

吧

，该指令似乎未能在动画，时除外的第一次修改页面加载时检测值。

2）即使是动画时间指令对动画值的响应时间，动画也没有被触发。我检查它添加了一个类元素。为什么没有动画？我试图直接将TweenMax命令放到指令中，并且动画显示TweenMax正在工作。

这个问题在过去的几个小时里折磨了我。尽管它非常强大，但用AngularJs进行开发却让我感到很震惊。希望有人能帮助我。非常感谢。

下面是HTML的一部分：

<section data-ng-controller="HomePageController"> 
    <nav> 
     <ul> 
      <li ng-click="a=true; b=false">foo</li> 
      <li ng-click="b=true; a=false">bar</li> 
     </ul> 
     <hr> 
     <section animate-when="{{ showA }}" data-animate-class="showExpand"></section> 
     <section animate-when="{{ showB }}" data-animate-class="showExpand"></section> 
    </nav> 
</section> 

两个昭和和showB在HomePageController属性：

$scope.showA = true; 
$scope.showB = false; 

模块：

(function (define, angular) { 
    "use strict"; 

    define(['controllers/HomePageController', 
    'directives/animateWhen', 
    'animations/showExpand' 
    ], 
    function (HomePageController, animateWhen, showExpand) { 
    var moduleName = "page"; 

    angular.module(moduleName, ["ngAnimate"]) 
    .controller("HomePageController", HomePageController) 
    .animation(".showExpand", showExpand) 
    .directive("animateWhen", animateWhen); 
    return moduleName; 
    }); 

}(define, angular)); 

showExpand动画：

(function (define) { 
    define([''], function() { 
     var showExpand = function() { 
      return { 
       addClass: function(element, className){ 
        //not running 
        console.log("startAdding"); 
        TweenMax.to(element, 1, {opacity:0}); 
       }, 
       removeClass: function(element, className){ 
        //not running either 
        console.log("startRemoving"); 
        TweenMax.to(element, 1, {opacity:0}); 
       } 
      } 
     }; 

     return [ showExpand ]; 
    }); 
}(define)); 

这里是animateWhen指令：

(function (define) { 
    define([''], function() { 
     var animateWhen = function ($animate) { 
      return function(scope, element, attrs){ 
       scope.$watch(attrs.watch, function(value){ 
        if(value){ 
         console.log("add"); //run once only when page is load 
         TweenMax.to(element, 1, {opacity:1}); 
         $animate.addClass(element, attrs.animateClass); 
        } else { 
         console.log("remove"); //same, run once only 
         TweenMax.to(element, 1, {opacity:0}); 
         $animate.removeClass(element, attrs.animateClass); 
        } 
       }, true); 
      } 
     }; 

     return [ "$animate", animateWhen ]; 
    }); 
}(define)); 

Answer 1

用于观看指令属性，你需要使用attrs.$observe，因为在该范围内没有watch属性（你甚至不具有分离的范围）。

尝试：

attrs.$observe("watch", function(value){ 

}; 

代替。