Question

我正在尝试这个

$scope.graph.transform = "transform: translate(" + 
                          $scope.graph.width + "," + 
                          $scope.graph.height + ");";

我从

得到的一切

<h3>transform: <span ng-bind="graph.transform"/></h3>

是这个

transform: transform: translate(undefined,undefined);

但我知道价值观存在，因为如果我这样做

<h3>transform: <span ng-bind="graph.height"/></h3>

我得到了

transform: 336

修改

这也是代码的一部分：

     $scope.graph = {};
     $scope.$watch(function(){
         return $window.innerWidth;
     }, function(value) {
         $scope.graph.width = value * 0.5;
     });

     $scope.$watch(function(){
         return $window.innerHeight;
     }, function(value) {
         $scope.graph.height = value * 0.5;
     });

Answer 1

因此：

$scope.graph = {};

您可以默认使用

$scope.graph = {
    height: 0,
    width: 0
};

高度和宽度未定义，直到手表触发。你正在做手表的方式不是检查未定义。手表的第一个触发器未定义，在您调整屏幕大小之前可能不会再次触发。

$scope.$watch(function(){ 
    return $window.innerWidth; 
}, function(value) {
    if(value){
        console.log(value);
    }
});

$scope.$watch(function(){ 
    return $window.innerHeight; 
}, function(value) {
    if(value){
        console.log(value);
    }
});

此外，在窗口大小调整时不会触发$ digest循环，只会触发用户事件，因此您需要这样做：

$window.addEventListener('resize', debounce(function(){
    $scope.$apply();
}, 500));

你会想要去除事件，以便每隔ms就不会调用它，它会使你的应用程序崩溃，这只是使用debounce function from here by David Walsh，但很多库（如lodash，也许是jquery）已经有一个内置

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
}

同样按照您的方式绑定值不会使用$ watches进行更新。你可以这样做：

<h3>transform: translate({{ graph.width }}, {{ graph.height }});</h3>

Here is the updated plunkr，您必须调整右侧窗口的大小才能触发$ watch。

如果你想做一个$ watchGroup，你可以传入一个函数数组而不只是一个函数

$scope.$watchGroup([function(){
    return $window.innerWidth;
}, function(){
    return $window.innerHeight;
}], function() {
    $scope.graph.width = $window.innerWidth / 2;
    $scope.graph.height = $window.innerHeight / 2;
});

Here is a plunker demonstrating that

为什么我不能为transform创建一个字符串：在Angular.js中翻译？

1 个答案: