使用AngularJS呈现视图时，哪个事件触发?

I know there's $viewContentLoaded, but it fires before AngularJS substitutes the placeholders with scope variables.

我知道有$viewContentLoaded，但它在AngularJS用范围变量替换占位符之前触发。

I managed to solve this by setting a timeout for 0 ms in my $viewContentLoaded listener, but that's very ugly.

我通过在$viewContentLoaded侦听器中为0 ms设置超时来解决这个问题，但这非常糟糕。

I'm using this to parse LessCSS stylesheets included in partials, but I have an URL prefix field which I need to substitute to the stylesheet URL before I pass it to LESS.

我使用它来解析部分中包含的LessCSS样式表，但是我有一个URL前缀字段，我需要在传递给LESS之前将其替换为样式表URL。

Here's my code (with my ugly hack):

这是我的密码(用我丑陋的密码):

var AccountController = function($scope, UserService) {
    var user = UserService.get();
    $scope.username = user.profile.displayName || user.contact;

    var bindLESSInit = function($scope, linkElementSelector) {
        $scope.$on('$viewContentLoaded', function() {
            var linkElement = document.querySelector(linkElementSelector);
            if (!linkElement) throw new Error('bindLESSInit: link element not found');

            console.log('link href before timeout: ', linkElement.href);
            // BAD: outputs "http://localhost:8282/%5B%5BstaticURLPrefix%5D%5D/static/portal/app/less/account.less"
            setTimeout(function() {
                console.log('link href after timeout: ', linkElement.href);
                // GOOD: outputs "http://localhost:8282/static/portal/app/less/account.less"
                // clear previous view's styles
                less.sheets = less.sheets.filter(function(e) { 
                    return e.getAttribute('class') && e.getAttribute('class').match('view-style');
                });
                less.sheets.push(linkElement);
                less.refresh();   
            }, 0);

        });
    };

    bindLESSInit($scope, '#account-stylesheet');    
};

[...]

There's a related question here: How can I trigger an event when an angular JS route template has been loaded

这里有一个相关的问题:当加载了一个角度JS路径模板时，如何触发事件

I tried the answer, using $routeChangeSuccess instead, but it gives the same results.

我尝试了答案，使用$routeChangeSuccess，但是得到了相同的结果。

Cheers

干杯

2 个解决方案

#1

This is a very long thread, but it might help you. From a quick read, I think this is not an angular way to do things. Instead it is suggested to use a directive to solve the problem.

这是一条很长的线，但它可能会帮助你。快速阅读，我认为这不是一种有角度的方法。相反，建议使用一个指令来解决这个问题。

https://github.com/angular/angular.js/issues/734

#2

Based on the answer of Jess, I took another path and solved it using a directive.

基于Jess的回答，我采用了另一种方法，并使用指令解决了它。

/**
 * Directive to load LESS stylesheets when inserted.
 * @param {attribute} url url of the stylesheet
 */
var lessStylesheetDirective = function() {
    var link = function(scope, element, attrs) {        
        var linkElement = $('<link rel="stylesheet/less" type="text/css">');

        // when link is called, we don't have the attribute yet, if it's interpolated.
        // see http://*.com/questions/11913841
        attrs.$observe('url', function(value) {
            if (!value) return;

            if (!window.less) throw new error('LESS global not found!');  

            linkElement.href = value;
            less.sheets.push(linkElement);

            // we reload everything FIXME: can we reload only this one?
            less.refresh(); 
        });

        element.on('$destroy', function() {
            // we remove our style from less, so it won't be parsed again
            less.sheets = less.sheets.filter(function(e) { 
                return e !== linkElement;
            });
        });
    };

    return {
        link: link,
    }
};

app.directive('lessStylesheet', lessStylesheetDirective);

Usage:

用法:

<div less-stylesheet url="{{yourUrlComesHere}}"></div>

#1