在指令模板内绑定样式值答案

【问题标题】：Binding style values inside directive template在指令模板内绑定样式值
【发布时间】：2015-07-03 23:26:54
【问题描述】：

我有这个指令：

app.directive('MessageChild', function($timeout) {
    return {
        restrict: 'E',
        scope: {
            pos: '=?',
            msg: '='
        },
        link: function(scope, element, attr) {
            scope.msg = attr.msg;
            scope.styleVar = "100"  //I want to insert this variable
        },
        template: '<style> div {position: absolute; top: **<scope variable or binding here>** }</style>' +
'<div>{{msg}}</div>'

})

这只是展示我正在尝试做的一个例子。我的风格实际上要复杂得多，并且涉及动画。我需要执行一些操作，然后将值传递给我的样式。如何从我的指令中在此位置注入变量？ Angular 不喜欢我将绑定放在样式中。

【问题讨论】：

请详细说明一下，也许我有点慢。你的模板语法也错了。
你能添加 plunkr/fiddle 你试过的东西吗
我有需要动态调整的动画样式，所以我需要动画值是可变的，以便我可以计算并将它们输入到模板中。语法问题出在哪里？
我会尝试设置一个 plunker 来玩……但我尝试过只使用 {{styleVar}} 之类的绑定。我尝试将其转换为函数并将模板作为变量的值返回并将范围注入模板

标签： css angularjs angular-directive

【解决方案1】：

您可以尝试在 link 函数中构造一个对象，然后可以将其传递给 ngStyle 指令。

app.directive('messageChild', function($timeout) {
    return {
        restrict: 'E',
        scope: {
            pos: '=?',
            msg: '='
        },
        link: function(scope, element, attr) {
            scope.msg = attr.msg;
            scope.styleVar = {
              'color': 'blue',
              'position': 'absolute',
              'top': '100'
            };
        },
        template: '<div ng-style="styleVar">{{msg}}</div>'
    };

});

Plunker 示例：

http://plnkr.co/edit/b1uO8N

编辑

如果您愿意，您可以使用<style> 标签完成同样的操作：

app.directive('messageChild', function($timeout) {
    return {
        restrict: 'E',
        scope: {
            pos: '=?',
            msg: '='
        },
        link: function(scope, element, attr) {
            scope.msg = attr.msg;
            scope.styleVar = 'blue';
        },
        template: '<style> div {position: absolute; top: 100; color: {{styleVar}}}</style><div>{{msg}}</div>'
    };

});

Plunker 示例：

http://plnkr.co/edit/8NxKFS?p=preview

【讨论】：

是的，我知道 ng-style，但它对更复杂的样式没有任何作用，例如你必须做多个类选择器的动画。 ng-style 仅将样式直接应用于元素。
我实际上将它用于某些事情，但我不喜欢它应用样式的方式。动画不响应它的样式与直接在模板中的样式相同。
好的，我知道问题出在哪里。它不喜欢我为绑定分配一个数字。如果你分配一个字符串，它就可以工作。
分配一个号码应该可以。例如，在link 函数内设置scope.pos = 100; 可以正确设置样式（请参阅plnkr.co/edit/6kEoMO）。很高兴听到它现在正在工作。 :-)
你可能想再看一遍。尝试更改 scope.pos 的值。

【解决方案2】：

我认为 Andrew Sala 的答案是正确的，我和 plunker 一起玩，看看它是否可以“动画”

<!DOCTYPE html>
<html ng-app="plunker">

<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');   </script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
<script src="app.js"></script>

<style>
  * { transition: all 0.5s}
</style>
<script>

var app = angular.module('plunker', []);

app.controller('MainCtrl',['$scope','$timeout', function($scope, $timeout) {

var mc = this;

mc.name = 'World';
mc.msg = '!';

mc.data = { pos: 250, color: 'blue', size: 100 }; 

 $timeout(function() {
   mc.msg = "bob";
   mc.data = { pos: 240, color: 'yellow', size: 160  }; 
 }, 1500);

 $timeout(function() {
   mc.msg = "bob is";
   mc.data = { pos: 230, color: 'orange', size: 210 }; 
 }, 2500);

 $timeout(function() {
   mc.msg = "bob is COMING!";
   mc.data = { pos: 220, color: 'red' , size: 300}; 
 }, 3500);

 }]);

 app.directive('messageChild', function($timeout) {
   return {
     restrict: 'E',
     scope: {

        stuff: '=',
        msg: '@'
     },
     link: function(scope, element, attr) {
      console.log(scope.stuff);

        scope.styleVar = scope.stuff.color;
          scope.pos = scope.stuff.pos;

        scope.$watch('stuff', function() {
          console.log(scope.stuff);
          scope.pos = scope.stuff.pos;
          scope.styleVar = scope.stuff.color;
          scope.size = scope.stuff.size;
        })
     },
     template: '<style> div {position: absolute; top: {{pos}}px; left: 100px; font-size: {{size}}% ; color: {{styleVar}}}</style><div>{{msg}}</div>'
    };

 });
</script>

</head>

<body ng-controller="MainCtrl as mc">
  <p>Hello {{mc.name}}!</p>
  <message-child msg="{{mc.msg}}" stuff="mc.data" >stuff</message-child>
</body>

</html>

Animated Text

您可以为每个项目插入样式标签，或者您可以使用 ng-style，我为我的动画分配了各种“类”，但也包括了一些用于“发光”和“模糊”的内联样式

【讨论】：