css - AngularJS 1.4.8 中带有作用域变量的 ng 样式

Question

index.html:

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

应用程序.js:

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

Fiddle .

预期:“foo”呈现红色。观察到:“foo”呈现黑色(默认)。

所以基本上我是在尝试根据作用域中的变量设置元素的样式。我已经看到它在 Angular 1.0.2 中有效，但我需要它在 1.4.8 中有效。

编辑:一旦我更新了 Controller 以包含 $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>

应用程序.js:

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

应用程序.css:

body {
  margin: 0px;
}

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

div div {
  position: absolute;
}

预期:“foo”被呈现为向下和向右 100 像素。观察:无位移。

Fiddle .

Answer 1

您代码中的 Controller 没有 $scope 作为依赖注入(inject) (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