2

今日AngularJSで遊び始めたばかりで、行き詰まっています。コーヒースクリプトと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:'セクションで、console.logが機能するためにスコープを$watchする必要がありました。これも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 に答える