无法查看 Angular 指令属性

Question

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

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

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

foo

或

bar

，除了第一次加载页面时，该指令似乎无法检测到 animate-when 更改中的值。

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 动画：

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

};

改为。