Javascript 当使用角度$scope.$watch触发时，jmpress未加载的元素的坐标和旋转 用例

jmpress

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

jmpress

当在DOM加载期间加载数据时，即硬编码数据，并且在

$（document）.ready（）

事件上触发

jmpress

，就会观察到所需的效果。看

但是，当通过AJAX请求加载数据并且通过手表触发

jmpress

时，

jmpress

会忽略坐标和旋转属性

问题 我怀疑watch在构建模板之前启动，因此

jmpress

看到DOM中的坐标和旋转是空的

问题:

• 有没有一种方法可以使用使用角度模板创建的DOM中的坐标和旋转来获取

  jmpress

• 在链接函数中添加坐标和旋转作为属性是否比使用模板更好

代码 创建了一个使用AJAX的请求

模板 指示 控制器 基本上，只是一个随机数据发生器

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:

很高兴知道，如果需要在渲染后执行代码（取决于插件），您可以插入并使用$timeout服务：

$timeout(function () {
  $($element).jmpress();
  init();
});

演示-$timeout:

---

如果这两种方法都有效，我更喜欢第一种方法，因为它在渲染之前执行代码，在某些情况下可以消除闪烁。在这种情况下，这似乎并不重要。

答案很好，我不知道$evalAsync。添加指向此的链接

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

var unregister = $scope.$watch('data', function(data) {
  if (data) {

    $scope.$evalAsync(function() {
      $($element).jmpress();
      unregister();
    });
  };
});

$timeout(function () {
  $($element).jmpress();
  init();
});