Угловая директива для установки цвета фона div

Question

Угловая директива для установки цвета фона div

0

Скажем, у меня есть элемент div:

<div id="wrapper">
   some text
</div>

Как написать угловую директиву, чтобы фон зависел от моего ввода?

Например, я попробовал:

<div id="wrapper" color temperature="51">
   some text
</div>

с директивой:

.directive('color', function() {
  return {
    restrict: 'A',
    replace: true,
    scope: {
      temperature: '='
    },
    template: '<div ng-class="temperatureCSS">Test</div>',
    link: function($scope) {

      $scope.$watch('temperature', function(v) {
        if(!v) { return; }

        var temperature = v;
        console.log("temperature", v)

        if(temperature > 31) {
          $scope.temperatureCSS = "redCSS" // redCSS works and is defined
        }

      });
    }
  }
})

Но это точно не работает. Я думаю, что проблема находится где-то в шаблоне.

JohnAndrews 22 июль 2015, в 17:12

Источник

Теги:

javascript

angularjs

angularjs-directive

2 ответа

Ещё вопросы

Ali · Answer 1 · 2015-07-22T14-00-00.000Z

Пожалуйста, не могли бы вы подробнее рассказать о проблеме, с которой вы столкнулись. Поскольку я понял из приведенного выше кода, можно сказать, что у вас есть поле ввода, и всякий раз, когда вы меняете значение в этом поле, фон должен меняться в зависимости от состояния функции $ watch.

Итак, если это так, допустим, что у нас есть контроллер с кодом, как показано ниже:

.controller('Main', function($scope){

  $scope.myInputValue = 20;

})

и поле ввода, ограниченное свойством scope myInputValue, с помощью директивы ngModel, как показано ниже:

<input ng-model="myInputValue" />

теперь вы хотите просто использовать свойство в своей директиве

<div id="wrapper" color temperature="myInputValue">
  some text
</div>

и что это.

Isaac Madwed · Answer 2 · 2015-07-22T13-51-00.000Z

Вы должны проверить угловую документацию по директивам. Похоже, что часть вашей проблемы заключается в том, что вы пытаетесь вставить шаблон с помощью директивы атрибута. Если вы хотите вставить шаблон, вам нужно указать директиву элемента.