Question

I just started playing with AngularJS today and am stuck. Pardon the coffeescript and 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}}

The loop and basic template are displaying except that the {{service_request}} expression isn’t being evaluated – just blank.

You will notice that in the ‘link:’ section, I had to $watch the scope for the console.log to work – it wasn’t evaluating serviceRequest either. What’s going on?

Thanks!!

Answer 1

If service_request is an object (as indicated by service_request.description on the last line), then you cannot pass it into the directive using interpolation ({{service_request}}) and attribute-based binding (@servReq).

Instead, you want the actual JavaScript value to be passed through, so you’ll need to change your Haml to

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

and upate your directive to use bi-directional binding based on the attribute

scope:
  service_request: "=servReq"

(You also need to underscore service_request here, because that’s how it’s used in the template.)

It’s hard to really tell what you’re trying to do, but here’s a jsFiddle that demonstrates these changes: http://jsfiddle.net/BinaryMuse/Z7Bru/