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

Question

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

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:

 <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?

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,

Answer 1

Your original fiddle is working with two minor change

• change angular from 1.0.3 to v1.2

• your jsfiddle missed value parameter in theStyle function

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>'

   }
}) ;