Question

使用JQuery在静态页面中说明的目标非常简单易行。在文档ready事件中，您有类似

的内容

$('.fadeIn').fadeIn();

这将为您提供一种漂亮，干净的方式，将动画效果应用于UI上需要它的任何元素。

输入角度和我的第一次体验（这里非常n00b）。我想应用上面的概念，但是一旦角度已经找到并完成了所有必要的渲染，就会触发它。我在大多数视图中都需要这个，但仅限于我想要制作动画的元素。

研究这个，看起来这样做的有条理的方式是通过一个指令，引导我this发布如何在生命周期的各个点挂钩成角度。

我的角度设置非常基本;

HTML

<div ng-app="profile" class="fadeIn">
    Some content
</div>

控制器

(function (app) {
    var controller = function () {
    };
    app.controller("menuController", [controller]);
})(angular.module("dashboard"));

app.js

(function (appName) {

    var app = angular.module(appName, ["ngRoute", "ui.bootstrap"]);

    app.config(['$locationProvider', function ($locationProvider) {
        $locationProvider.hashPrefix("");
    }]);

    var routeConfig = function ($routeProvider) {
        $routeProvider.when("/",
                {
                    templateUrl: "app/menu/menu.html",
                    controller: "menuController"
                });

        $routeProvider.otherwise({ redirectTo: "/" });
    }

    app.config(routeConfig);
    console.log("app started");
}("dashboard"));

考虑到这种设置，我将原始概念应用于angular指令的方法如下：

myAnimate.js

angular.module("profile", []).directive('directive',
    function($timeout) {
        return {
            restrict: 'A',
            link: function(scope, element, attr) {
                $timeout(function() {
                    SetupAnimations();
                });
            }
        }
    });

function SetupAnimations() {
    $(".fadeIn").fadeIn();
}

当我在return语句上放置断点时，它从未被击中。但是，angular.module()调用会被命中并且无错误地运行。

我知道我可以使用$rootScope挂钩控制器的初始化，但这意味着我必须为每个控制器初始化。我希望能够在整个应用程序中全局应用它。

我很确定我要么缺少一些非常简单的东西，要么完全从错误的角度接近这个。

Answer 1

经过charlietfl的一些修补和帮助后，我设法找到问题的根源。那里有一些错误的配置导致了所描述的行为。

主要的一点是appName未定义，并且它没有在应用程序中的任何角度标记中使用（我正在处理遗留代码），这使得挂钩指令变得棘手。知道了这一点，我将myAnimation.js的代码移动到app.js就像这样;

(function (appName) {
    // appName here results in "undefined" error message but angular hooks in all the same
    var app = angular.module(appName, ["ngRoute", "ui.bootstrap"]);
    app.config(['$locationProvider', function ($locationProvider) {
        $locationProvider.hashPrefix("");
    }]);

    // the moved in directive here where it can attach to the app correctly
    app.directive('animate',
        function () {
            return {
                restrict: 'A',
                link: function (scope, element, attr) {
                    SetupAnimations();
                }
            }
        });

    //...remainder of logic in here unchanged
}("dashboard"));

function SetupAnimations() {
    $(".fadeIn").fadeIn();
}

我的HTML现在看起来像;

<div animate class="fadeIn"></div>

动画效果很好。

修改

我根据angular documentation on directives进一步细化，以便我的指令设置挂钩指令的工作方式，而不是利用jQuery进行动画连接。删除SetupAnimations()方法，并将指令简化为以下内容;

app.directive('fadeIn', function () { return { restrict: 'A', link: function(scope, element) { element.fadeIn(); } } });

这样我的HTML标记就像（注意连字符 - 阅读上面链接的文档）;

<div fade-In></div>

淡出元素一旦渲染

1 个答案: