Question

我有这个指令：

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不喜欢我在样式中放置绑定。

Answer 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

Answer 2

我认为安德鲁·萨拉的答案是正确的，我和那个玩家一起玩，看看它是否可以“动画”

<!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，我为我的动画分配了各种“类”，但也包含了一些“发光”和“模糊”的内联样式

在指令模板

2 个答案: