AngularJS 1.4.8 中具有范围变量的 ng 样式答案

【问题标题】：ng-style with scope variables in AngularJS 1.4.8AngularJS 1.4.8 中具有范围变量的 ng 样式
【发布时间】：2016-09-07 10:06:41
【问题描述】：

index.html:

<script src="app.js"></script>
<div ng-app="app" ng-controller="app" ng-style="{ color: thecolor }">
  foo
</div>

app.js：

angular.module("app", [])
.controller("app", function() {
    $scope.thecolor = "red";
});

Fiddle.

预期：“foo”呈现红色。观察到：“foo”呈现黑色（默认）。

所以基本上我试图从范围内的变量中设置元素的样式。我已经看到它在 Angular 1.0.2 中工作，但我需要它在 1.4.8 中工作。

编辑：一旦我更新了控制器以包含 $scope 依赖项，我仍然无法让某些事情起作用，例如在父元素中定位。

index.html:

<link rel="stylesheet" href="app.css">
<script src="app.js"></script>
<div ng-app="app" ng-controller="app">
  <div ng-style="{ left: x, top: y }">
    foo
  </div>
</div>

app.js：

angular.module("app", [])
.controller("app", ["$scope", function($scope) {
    $scope.x = 100;
    $scope.y = 100;
}]);

app.css：

body {
  margin: 0px;
}

div {
  position: relative;
  width: 100vw;
  height: 100vh;
}

div div {
  position: absolute;
}

预期：“foo”向下和向右渲染 100 像素。观察到：没有位移。

Fiddle.

【问题讨论】：

简单错误，您忘记在控制器依赖项中包含$scope。 jsfiddle.net/hvyyLwsk/1
请看我上面更新的问题陈述。
您的left 和top 值需要“px”后缀。
射击，我在 html 文件中尝试过，但没有成功，但看起来将 x 和 y 更改为带有“px”附加作品的字符串。有没有办法在视图中指定“px”？
如果我执行ng-style="{ left: x + 'px', top: y + 'px' }" 之类的操作，它似乎可以工作。如果您将您的回复写成答案，我会接受它

标签： css angularjs angularjs-scope

【解决方案1】：

您的代码中的控制器没有 $scope 作为依赖注入 (DI)，根据您更新的问题修改答案如下

控制器

angular.module("app", [])
 .controller("app", ['$scope',function($scope) {
    $scope.thecolor = "red";
    $scope.x = 100;
    $scope.y = 100;
}]);

查看

 <div ng-style="{ left: x + 'px', top: y + 'px' }">foo</div>

updated fiddle

【讨论】：

@BrianGradin 根据您的最新要求更新了答案

【解决方案2】：

您必须指定 CSS 值的单位 - 您可以在视图中执行此操作：

<div ng-style="{ left: x + 'px', top: y + 'px' }">

【讨论】：

【解决方案3】：

您错过了控制器中的$scope 注入。

angular.module("app", [])
.controller("Ctrl", function($scope) {
    $scope.thecolor = "red";
});

这是一个工作演示：

http://jsbin.com/jomacoj/edit?html,js,console,output

【讨论】：