Question

因此，这是一个自定义指令，用于根据屏幕大小更改调整元素及其内容的大小。我可以看到＆＃39; scalify＆＃39;正在改变我的想法，但风格本身并没有改变。我知道直接在css文件中应用静态值时样式会起作用。

.directive("card", function(){
    return{
        restrict : "E",
        controller: function($scope, $element, $attrs){
            var w = this;
            window.onresize = function () {

                $scope.scalify = {
                    '-ms-zoom': window.innerHeight/675,
                    '-moz-transform': 'scale(' + window.innerHeight/675 + ')',
                    '-o-transform': 'scale(' + window.innerHeight/675 + ')',
                    '-webkit-transform': 'scale(' + window.innerHeight/675 + ')'
                };
                $scope.$apply();
            }
        }
    };
})

以下是我如何在HTML中使用ng-Style

<card ng-style="scalify">
    ...
</card>

Answer 1

嗨，请看这里：http://run.plnkr.co/jfeF9NcPcGroNCsg/你可能需要对css转换进行一些工作，但是当你想要改变窗口大小时，样式会发生变化

app.directive("card", function($window) {
  return {
    restrict: "E",
    link: function(scope, element, attrs) {


      scope.onResizeFunction = function() {
        //$scope.windowHeight = $window.innerHeight;
        // $scope.windowWidth = $window.innerWidth;

        var scalify = {
          '-ms-zoom': $window.innerHeight / 675,
          '-moz-transform': 'scale(' + $window.innerHeight / 675 + ')',
          '-o-transform': 'scale(' + $window.innerHeight / 675 + ')',
          '-webkit-transform': 'scale(' + $window.innerHeight / 675 + ')',
          'background-color': 'red'
        };


        element.css(scalify);
        console.log(element);
      };

      angular.element($window).bind('resize', function() {
        scope.onResizeFunction();
        scope.$apply();
      });
    }
  }
});

AngularJS - ng-Style在指令中更新时不会更改

1 个答案: