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

Question

我有使用某些模板的自定义指令(隔离范围)。我想为内部模板触发ng-style。

这是一个Demo证明了这个问题

---

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

               }
       }
   }) ;

我写了 HTML:

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

但什么也没发生。

我怎样才能使 external ng-style 为指令模板工作？

预期的行为应该与我将要写的类似:

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

谢谢，

Answer 1

你原来的 fiddle 有两个小改动

• 将 Angular 从 1.0.3 更改为 v1.2

• 您的 jsfiddle 在 theStyle 函数中遗漏了 value 参数

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

   }
}) ;