javascript - 无法观察 Angular 指令属性

Question

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

我使用 HeadJs 加载所有 vendor 的 JS 文件。

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

foo

或

bar

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

2)即使在animate-when中time指令响应value，也不会触发动画。我检查它向元素添加了一个类。为什么没有动画？我尝试将 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>

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));

显示展开动画:

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

};

相反。