当使用angular $scope.$watch触发时，未被jmpress加载的元素的坐标和旋转

Coordinates and rotation of elements not loaded by jmpress when triggered using angular $scope.$watch

本文关键字：加载 jmpress 未被 旋转 元素 坐标 angular scope watch      更新时间：2023-09-26

用例

jmpress要求在加载之前构造DOM。使用AngularJS, DOM可以用模板构造，jmpress可以用监视DOM的指令初始化。

在DOM加载过程中加载数据，即硬编码数据，在$(document).ready()事件上触发jmpress，可以观察到预期的效果。看到 jsfiddle 。

但是，当数据通过AJAX请求加载并且jmpress在手表上被触发时，坐标和旋转属性将被jmpress忽略。

我怀疑watch是在模板构造之前触发的，所以jmpress看到DOM中的坐标和旋转是空的。

  • 是否有办法让jmpress使用与角模板创建的DOM的坐标和旋转?
    • 在链接函数中添加坐标和旋转作为属性而不是使用模板是更好的吗?

使用AJAX请求创建一个jsFiddle

模板
<div ng-app="app" ng-controller="randomData" ui-impress>
    <div ng-repeat="item in data"
         class="step"
         data-duration="2000"
         data-x="{{ item.coordinates.x }}"
         data-y="{{ item.coordinates.y }}"
         data-z="{{ item.coordinates.z }}"
         data-rotate-x="{{ item.rotate.x }}"
         data-rotate-y="{{ item.rotate.y }}"
         data-rotate-z="{{ item.rotate.z }}"
         data-scale="{{ item.scale }}"
    >
        {{ item.message }}
    </div>
</div>
CSS 

.step {
    opacity: 0.1;
    width: 20em;
    height: 3em;
}
.step.active {
    -webkit-transition: opacity 1s;
    -moz-transition:    opacity 1s;
    -ms-transition:     opacity 1s;
    -o-transition:      opacity 1s;
    transition:         opacity 1s;
    opacity: 1;
}

指令

var app = angular.module("app", []);
app.directive('uiImpress', function() {
    return {
        restrict: 'A',
        scope: false,
        link: function($scope, $element) {            
            var init = $scope.$watch('data', function(data) {
                if (data) {
                    $($element).children('.step').each(function(index, step) {
                        $($element).jmpress('init', step);
                    });
                    $($element).jmpress();
                    init();
                };
            });
        }
    };
});
控制器

基本上就是一个随机数据生成器。

function randomData($scope, $http) {
    $scope.data;
    var slides = 10;
    var config = {
        coordinates: [ -1000, 1000 ],
        rotate: [ -180, 180 ],
        scale: [ 0.1, 10 ]
    };
    var randomDataSource = "http://api.icndb.com/jokes/random/" + slides;
    function getRandomInt (min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    function generateData(messages) {
        return _.range(slides).map(function(value, index) {
            return {
                message: messages[index],
                coordinates : {
                    x: getRandomInt.apply(null, config.coordinates),
                    y: getRandomInt.apply(null, config.coordinates),
                    z: getRandomInt.apply(null, config.coordinates)
                },
                rotate: {
                    x: getRandomInt.apply(null, config.rotate),
                    y: getRandomInt.apply(null, config.rotate),
                    z: getRandomInt.apply(null, config.rotate)
                },
                scale: getRandomInt.apply(null, config.scale)
            };
        });
    }
    $http.get(randomDataSource).then(function(response) {
        var messages = response.data.value.map(function(item) {
            return item.joke;
        });
        $scope.data = generateData(messages);
    })
};

在$watch的监听函数中，删除以下代码:

$($element).children('.step').each(function(index, step) {
  $($element).jmpress('init', step);
});

将剩余的代码封装在$evalAsync调用中:

var unregister = $scope.$watch('data', function(data) {
  if (data) {
    $scope.$evalAsync(function() {
      $($element).jmpress();
      unregister();
    });
  };
});

这会延迟代码的执行，直到DOM被Angular操作之后，但在浏览器渲染之前。

演示- evalAsync美元: http://jsfiddle.net/CV2JQ/

如果你需要在渲染后执行代码(取决于插件)，你可以注入并使用$timeout服务: 
$timeout(function () {
  $($element).jmpress();
  init();
});

演示-美元超时: http://jsfiddle.net/c9v9G/

如果这两种选择都有效，我更喜欢第一个，因为它在渲染之前执行代码，这在某些情况下可以消除闪烁。在这种情况下，这似乎无关紧要。

相关文章：