Javascript 为什么可以'；我为transform创建一个字符串：translate in Angular.js？

我在试这个

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

我从中得到的一切

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

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

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

编辑：

这也是代码的一部分：

     $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;
     });

因此：

$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));

您可能希望取消该事件的缓冲，这样它就不会每毫秒调用一次，它会使您的应用程序崩溃，这只是使用，但许多库（如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);
    };
}

同样，绑定值的方式不会使用$watchs更新。你可以做：

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

---

我在它工作的地方创建了一个plunkr:。它必须是你的代码的一部分，你没有显示这是breaking@KevinF，也许编辑中的代码是罪魁祸首？它破坏了你的plunkr。所以，是的，从一开始定义值确实可以修复它。但是手表不能正常工作，调整窗口大小没有任何效果。谢谢。但我没有成功地用

$scope.$watchGroup

替换

$scope.$watchGroup.

，这似乎是一个合理的步骤。你能做到吗？

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);
    };
}

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

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