javascript - AngularJS 1.2 到 1.3 clientWidth 不再正确

Question

在将 Angular 从 1.2 更新到版本 1.3.9 时，我遇到了 clientWidth 等问题。之前他们返回正确的 DOM 值，但现在他们返回 0。此时元素位于 DOM 中，CSS 将宽度设置为 100%，不确定更新为 Angular 与此有​​什么关系。任何见解都会很棒。

提前致谢!

var $m = angular.module('quad.insights.time', ['src/time/time.html','quad.insights.utils']);

$m.directive('timeChart',['$compile','$filter','utils','dateFilter',function($compile,$filter,utils,dateFilter) {
return {
    restrict: 'E',
    replace: true,
    scope: {
        id: '@',
        data: '=',
        metadata: '='
    },
    link: function (scope, element, attrs) {
        window['_timeScope'] = scope;


        scope.render = function() {
            var data = getData();
            if (!data) return;

            function containerWidth() {
             return element[0].querySelector('.qi-time-lines').clientWidth ; // returning 0 with 1.3 update
            }
            function containerHeight() { return element[0].querySelector('.qi-time-lines').clientHeight // returning 0 with 1.3 update }

            var rangeAbs = function(d){ return range(d) * containerHeight() };
            var domainAbs = d3.scale.linear().domain([lowDate,highDate]).range([ 0, containerWidth() ]);
            $compile(element)(scope);
            return;
        }

        scope.$watch('data',scope.render,true);
    },
    templateUrl: 'src/time/time.html'
}
}]);

Answer 1

我不知道这是否是最好的方法，但它解决了我的问题:

设置为自定义指令:

angular.module('appControllers').directive('ngChart', function() {
    return function(scope, element, attrs) {
        scope.elementReady(element);
    }
});

然后在 Controller 上:

$scope.elementReady = function(el){
    console.log(el[0].clientWidth); // <- Right width here
}