Javascript 指令模板不计算表达式

我今天刚开始玩AngularJS，我被卡住了。请原谅咖啡和火腿

# some-js-file.js.coffee
app.directive "sr", ->
  restrict: "C"
  replace: true
  transclude: true
  scope:
    serviceRequest: "@servReq"
  template: "<div>" + "<div class=\"name\">{{service_request}}</div>" + "<div class=\"body\" ng-transclude></div>" + "</div>"
  link: (scope, element, attrs) ->
    scope.$watch 'serviceRequest', (serviceRequest) ->
      console.log scope.serviceRequest, serviceRequest
    # cool stuff

# index.html.haml
# more cool stuff...
.row{'ng-repeat' => 'service_request in service_requests'}
  .sr{'serv-req' => '{{service_request}}'}
    {{service_request.description}}

#some-js-file.js.coffee
应用程序指令“sr”，->
限制：“C”
替换：正确
转移：对
范围：
serviceRequest:“@servReq”
模板：“+”{{service_request}}“+”+“”
链接：（范围、元素、属性）->
范围.$watch'serviceRequest'，（serviceRequest）->
console.log scope.serviceRequest，serviceRequest
#酷东西
#index.html.haml
#更酷的东西。。。
.row{'ng-repeat'=>“服务请求中的服务请求”}
.sr{'serv-req'=>{{{service_request}}}
{{service_request.description}}

循环和基本模板正在显示，只是{{service_request}}表达式没有被计算-只是为空

您会注意到，在“link:”部分，我不得不观察console.log的作用域，它也没有评估serviceRequest。发生什么事了

---

谢谢

如果

service\u request

是一个对象（如最后一行

service\u request.description

所示），则不能使用插值（

{{service\u request}}

）和基于属性的绑定（

@servReq

）将其传递到指令中

相反，您希望传递实际的JavaScript值，因此需要将Haml更改为

.sr{'serv-req'=>'service\u request'}

并更新指令以基于属性使用双向绑定

范围：
服务请求：“=servReq”

（您还需要在此处下划线

服务请求

，因为在模板中就是这样使用的。）

---

很难真正说出您想要做什么，但这里有一个JSFIDLE演示了这些更改：

我只想补充一点，它不会评估服务请求，因为您创建了一个隔离作用域，并且没有传递它。布兰登的答案实际上更完整。完美。我完全误解了Angular是如何处理变量的。你击中了它的头。非常感谢你的帮助。