Javascript AngularJS从表达式{{}中的字符串中删除子字符串

我的angularJS标记中有这个标记

<div class="photo" style="background-image: url('{{item.mageURL}}')"></div>

但它只返回一个空字符串

---

你知道如何在AngularJS中实现这一点吗？你必须对

item.mageURL.str

字符串应用

substring

方法

'{{item.mageURL.str.substring( 0, item.mageURL.str.indexOf( '/stamp' ) )}}'

另一种方法是使用

split

方法

<div class="photo" style="background-image: url('{{item.mageURL.str.split('/stamp')[0]}}')"></div>

{{item.mageURL.str.split（'/stamp'）[0]}

{{item.mageURL.str.substring（0，item.mageURL.str.indexOf（'/stamp'））}

请使用“ng样式”

ng style=“{'background-image'：'url（'+item.mageURL.str.substring（0，item.mageURL.str.indexOf（'stamp'））+'）”）

---

我认为最好为此创建一个小指令，如下所示

app.directive('bgImg', function() {
  return function(scope, elem, attrs) {
    elem.css('background-image', someTransformFn(attrs.bgImg));
  }
})

与此相比，模板中的长JS表达式是真正的难题：

<div bg-img="{{vm.someImg}}">

我建议您在控制器中保留这种逻辑，并使模板更易于阅读。干杯。我建议你不要弄脏你的控制器，而是修复你的问题（看起来你有一些关于字符串API的解决方案）或者改用过滤器。为什么在这种情况下

ng style

更好？一般来说，使用ng style时性能更好，因为它在模型上添加了一个监视，并且仅当模型发生更改时才会更新视图，在这种情况下为item.mageurl.str。当您使用样式时，它将每次执行。有趣的是，它被包装在一个

ng repeat

中，因此我认为它已经有一个手表了？当数组/属性的计数发生变化时，ng repeat watch会触发。ng风格有自己的手表。我最喜欢这个，如果它能用的话。让您的控制器保持简单和用户体验驱动。在模板中保持这样的逻辑，或者使用filter.ahh，这很有意义。该死的复制和过去与

str

app.directive('bgImg', function() {
  return function(scope, elem, attrs) {
    elem.css('background-image', someTransformFn(attrs.bgImg));
  }
})

<div bg-img="{{vm.someImg}}">