javascript - 指令模板不评估表达式

Question

我今天刚开始玩 AngularJS，但遇到了困难。请原谅 CoffeeScript 和 haml。

# 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}}

正在显示循环和基本模板，但未计算 {{service_request}} 表达式 - 只是空白。

您会注意到，在“link:”部分中，我必须 $watch console.log 的范围才能工作 - 它也没有评估 serviceRequest。这是怎么回事？

谢谢!!

Answer 1

如果 service_request 是一个对象(如最后一行的 service_request.description 所示)，那么您无法使用插值将其传递到指令中 ({ {service_request}})和基于属性的绑定(bind)(@servReq)。

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

.sr{'serv-req' => 'service_request'}

并更新您的指令以使用基于属性的双向绑定(bind)

scope:
  service_request: "=servReq"

(您还需要在此处添加下划线 service_request，因为这就是它在模板中的使用方式。)

很难真正说出您想要做什么，但这里有一个 jsFiddle 演示了这些更改:http://jsfiddle.net/BinaryMuse/Z7Bru/