Question

的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

预期：＆＃34; foo＆＃34;呈现红色。观察到：＆＃34; foo＆＃34;呈现黑色（默认值）。

所以基本上我试图从范围中的变量设置元素的样式。我已经看到它在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;
}

预期：＆＃34; foo＆＃34;向下和向右渲染100px。观察到：没有位移。

Fiddle

Answer 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

Answer 2

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

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

Answer 3

你在控制器中错过了$scope注射。

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

这是一个有效的演示：

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

在AngularJS 1.4.8中使用范围变量的ng-style

3 个答案: