2

我今天刚开始玩 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}}

循环和基本模板正在显示，除了 {{service_request}} 表达式没有被评估 - 只是空白。

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

谢谢！！

4

1 回答 1

2

如果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/

于 2013-02-10T10:10:35.720 回答