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>

但没有发生任何事情。

如何让外部 ng-style用于指令模板？

预期的行为应该像我写的那样：

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

谢谢，

Answer 1

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

将角度从1.0.3更改为v1.2
您的jsfiddle错过value函数中的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>'

   }
}) ;

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

1 个答案: