修改

Question

我正在尝试执行类似以下的操作：Plunker

我知道我可以使用$filter服务，但我认为内联过滤更具表现力。

如果有人可以查看上面的链接并告诉我我的错误在哪里。

编辑（使用$ interpolate）：Plunker

我不确定如果我以正确的方式使用$interpolate，但我可以检查here我认为我做过。

Answer 1

我的猜测是Angular不知道模板，你需要手动编译它，或者最好在创建指令时使用模板键。

我修改了您的代码段here，但基本上归结为：

mainApp.directive('mainContainer', function($parse){
  return {
    template: '<h1>{{ lowerString | CapFirst }}</h1>',
    link: function(scope, elem) {
      scope.lowerString = 'lol';
    }
  };
});

修改

根据要求，以下是使用$compile服务的替代snippet：

mainApp.directive('mainContainer', function($compile){
  return function(scope, elem) {
    var lowerString = 'lol';
    var html = $compile('<h1>{{ "' + lowerString + '" | CapFirst }}</h1>')(scope);
    elem.append(html);
  };
});

如果您使用$interpolate代替$compile，这也可以有效。使用$compile的好处是，如果您使用的模板绑定到范围，$compile会将范围正确绑定到模板，而$interpolate则不会。

AngularJS，附加html的内联过滤器

1 个答案:

修改