Question

我正在使用RequireJs构建一个AngularJs应用程序并尝试制作一个动画： https://egghead.io/lessons/angularjs-animating-the-angular-way/

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

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

foo

或

bar

时，该指令似乎无法检测动画时的值 - 除了第一次加载页面时的更改。 p>

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

这个问题在过去的几个小时里折磨着我。尽管AngularJs非常强大，但是使用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>

showA和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 Animation：

(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){

};

代替。

无法观看Angular指令属性

1 个答案: