如何将ngStyle传递给Angular中定义为元素的指令？

I have custom directive (isolate scope) that uses some template. And I want to fireng-style for internal template.

我有使用一些模板的自定义指令(隔离范围)。我想要内部模板的fireng风格。

Here is a Demo that demonstrates the issue

这是演示该问题的演示

---

JS

app.controller('fessCntrl', function ($scope, Fct) {
   $scope.Fct = Fct;
});

app.$inject = ['$scope','Fct'];

app.factory('Fct', function() {
    return {
        theStyle: function(value) {
            return {'height': value*10 + 'px'}
        }
    };
});

app.directive('myElem',
   function () {
       return {
           restrict: 'E',
           replace:true,
           scope:{

           },
           template: '<div class="myclass"><input type="button" value=check></input>',
           link: function ($scope, $element, $attrs) {

               }
       }
   }) ;

I wrote HTML:

我写了HTML:

 <my-elem ng-style="Fct.theStyle(120)"> </my-elem>

but nothing happened.

但什么都没发生。

How can I achieve to make external ng-style to work for directive template?

如何使外部ng-style适用于指令模板?

The expected behavior should be similar like I'll write:

预期的行为应该类似于我写的:

<div class="myclass" ng-style="theStyle(120)"><input type="button" value=check></input>

Thank you,

1 个解决方案

#1

Your original fiddle is working with two minor change

你的原始小提琴正在进行两项小改动

• change angular from 1.0.3 to v1.2

  将角度从1.0.3改为v1.2

• your jsfiddle missed value parameter in theStyle function

  你的jsfiddle错过了在theStyle函数中的值参数

jsfiddle: http://jsfiddle.net/vittore/9Ymvt/1591/

 <div ng-controller="fessCntrl"> 
   <my-elem ng-style="Fct.theStyle(12)"></my-elem>   
 </div>


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

app.controller('fessCntrl', function ($scope, Fct) {
   $scope.Fct = Fct;
});

app.$inject = ['$scope','Fct'];

app.factory('Fct', function() {
    return {
        theStyle: function(value) {
            return {'height': value*10 + 'px'}
        }
    };
});


app.directive('myElem',
   function () {
   return {
       restrict: 'E',
       replace:true,
       scope:{
       },
       template: '<div class="myclass">' +
                 '   <input type="button" value=check></input>' +
                 '</div>'

   }
}) ;