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}}）和基于属性的绑定将其传递给指令（ @servReq）。

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

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

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

scope:
  service_request: "=servReq"

（您还需要在此处标注service_request，因为它是如何在模板中使用的。）

很难真正说出你想要做什么，但这里有一个证明这些变化的jsFiddle：http://jsfiddle.net/BinaryMuse/Z7Bru/

指令模板不评估表达式

1 个答案: