How to evaluate Angular expression in child directive and expose it on parent directive?

Question

I have a directive that represents a group of objects, let's call it people.

This directive has an ng-repeat in its template that repeats a child directive, e.g. person, which has an expression attribute personGreeting which should evaluate on its scope.

Both people and person use isolate scope.

How can I set up these directives such that I can expose personGreeting on the people directive and have it be evaluated within the scope of the person directive?

Here is an example:

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.myPeople = [{
      id: 1,
      name: 'Bob'
    }, {
      id: 2,
      name: 'Steve'
    }, {
      id: 3,
      name: 'Joe',
    }]
  })
  .directive('people', function() {
    return {
      scope: {
        peopleList: '=',
        eachPersonGreeting: '&'
      },
      template: ''
    }
  })
  .directive('person', function() {
    return {
      scope: {
        personDetails: '=',
        personGreeting: '&'
      },
      template: '{{personGreeting(personDetails)}}'
    }
  })
  .directive('people2', function() {
    return {
      scope: {
        peopleList: '=',
        eachPersonGreeting: '@'
      },
      template: ''
    }
  })
  .directive('person2', function() {
    return {
      scope: {
        personDetails: '=',
        personGreeting: '@'
      },
      template: '{{personGreeting}}'
    }
  })





  



  Here we are just using an in-line expression with ng-repeat, which works as you'd expect:
  
    Hello, {{currentPerson.name}}!
  

  But what if we have custom directives, `people`, and `person`, and we want to let consumers of our `people` directive specify how each `person` should be greeted without making them override our directive's template, and also have data binding still work?

  Unfortunately, this doesn't seem to work:

  

  Neither does this:

I also started delving into the compile, link and controller functions for both of the directives, as well as the $interpolate service, and got it kind of working, but it got really weird and messy, and I couldn't get data binding working, so it felt like wasted effort. I feel like this should be simple, but it doesn't seem to be.

Is there an elegant way to do this?

blah238 · Accepted Answer

Okay I managed to put together a simple guestbook app using the same concept that works: http://plnkr.co/edit/R7s6xE?p=info

angular.module('guestbookApp', [])
  .controller('guestbookCtrl', function($scope) {
    $scope.latestGuests = [{
      id: 1,
      name: 'Bob'
    }, {
      id: 2,
      name: 'Steve'
    }, {
      id: 3,
      name: 'Joe',
    }];
    $scope.newGuest = {
      name: ''
    };
    $scope.addGuest = function() {
      $scope.latestGuests.push(angular.extend(angular.copy($scope.newGuest), {
        id: $scope.latestGuests.length + 1
      }));
      $scope.newGuest.name = '';
    };
  })
  .directive('guestList', function($parse) {
    return {
      scope: {
        guests: '='
      },
      template: '',
      controller: function($scope, $element, $attrs) {
        this.greeting = function(scope) {
          return $parse($attrs.greeting)(scope);
        };
      }
    };
  })
  .directive('guest', function($parse) {
    return {
      scope: {
        guestDetails: '='
      },
      template: '{{greeting}}',
      require: '?^guestList',
      link: function(scope, element, attrs, controller) {
        var updateGreeting;
        if (controller) {
          updateGreeting = function() {
            scope.greeting = controller.greeting(scope);
          };
        } else if (attrs.greeting) {
          updateGreeting = function() {
            scope.greeting = $parse(attrs.greeting)(scope);
          };
        }
        scope.$watch('guestDetails.name', function() {
          updateGreeting();
        });
      }
    };
  });





  




  Latest guests:

  
  
  Type your name below to sign the guestbook:

If anyone has any suggestions on how this could be improved please let me know! I still feel kind of yucky about the use of $parse and $watch, but maybe it's unavoidable?

How to evaluate Angular expression in child directive and expose it on parent directive?

Answers (2)

Related Questions