Comment passer ngStyle à la directive définie comme élément dans Angular ?

Question

J'ai une directive personnalisée (portée d'isolement) qui utilise un modèle.Et je veux tirerng-style pour le modèle interne.

Voici une Démo cela démontre le problème

---

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) {

               }
       }
   }) ;

J'ai écrit du HTML :

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

mais rien ne s'est passé.

Comment puis-je parvenir à faire externe ng-style travailler pour un modèle de directive ?

Le comportement attendu devrait être similaire à celui que j'écrirai :

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

Merci,

Answer 1

Votre violon d'origine fonctionne avec deux changements mineurs

• changer angulaire de 1.0.3 à v1.2

• votre jsfiddle a manqué value paramètre dans theStyle fonction

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

   }
}) ;