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.

0
Brian Gradin 11 Май 2016 в 23:01

3 ответа

Лучший ответ

Вы должны указать единицу измерения значений CSS - вы можете сделать это в представлении:

<div ng-style="{ left: x + 'px', top: y + 'px' }">
1
tymeJV 11 Май 2016 в 20:26

Контроллер в вашем коде не имеет $ scope как Dependency Injection (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>

обновленная скрипка

1
Shushanth Pallegar 11 Май 2016 в 20:37

Вы пропустили впрыск $scope в контроллер.

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

Вот рабочая демонстрация:

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

0
Zohaib Ijaz 11 Май 2016 в 20:06