AngularJs Directive


#1

Have a question about creating a custom truncate directive

So my goal is to create a truncate directive that communicates with a component.

Here is my code:

t%main{'ng-app' => 'myApp'}
  
 
  %atom-heading{ text: "a sting of text", 
                'activate-truncator' => 'true',
                'truncator-bindings' => '{maxCharacters: "6", isEllipses: "true"}'}
  
  
  %atom-heading{ text: "a sting of text", 
                'activate-truncator' => 'true',
                'truncator-bindings' => '{ maxCharacters: "10", isShowMore: "true" }' }
  
  
  %atom-heading{ text: "a sting of text",
              'truncator-bindings' => 'true',
              'truncator-bindings' => '{ maxCharacters: "5", isReadMore: "true"}'}
  
  
  %atom-heading{ text: "This is yet another string of text",
              'truncator-bindings' => 'true',
              'truncator-bindings' => '{ maxCharacters: "5"}'}
app = angular.module("myApp", [])

# Atom Heading Component
app.component 'atomHeading',
  template: """
  <h2 truncator truncator-bindings=truncatorBindings activate-truncator=activateTruncator> 
       {{ $ctrl.text | limitTo: $ctrl.truncatorBindings.maxCharacters  }} 
  </h2>
  """
  bindings:
    text: '@'
    activateTruncator: '='
    truncatorBindings: '='
    truncator: '='
    maxCharacters: '='
  controller: ($scope) -> 

    this.truncatorBindings.text = this.text
    $scope.truncatorBindings = this.truncatorBindings
    $scope.activateTruncator = this.activateTruncator
    $scope.truncator = this.truncator
    $scope.maxCharacters = this.maxCharacters
  
app.directive 'truncator', () ->
  restrict: 'A'
  template: """
  <span>
    {{ truncatorBindings.text }}
    <span ng-if="truncatorBindings.isEllipses">...</span>
    <a href="#/" ng-if="truncatorBindings.isReadMore">Read More</a>
    <button class="atom-button" ng-if="truncatorBindings.isShowMore">Show More</button>
  </span>
  """
  scope:
    truncatorBindings: '='
  link: (scope, element, attributes) ->
    scope.truncatorBindings = 
      text: scope.truncatorBindings.text ? true
      maxCharacters: scope.truncatorBindings.maxCharacters ? 5
      # By Default I'm setting a teranary operator setting everything to false     
      isEllipses: scope.truncatorBindings.isEllipses ? false
      isShowMore: scope.truncatorBindings.isShowMore ? false
      isReadMore: scope.truncatorBindings.isReadMore ? false

For some reason when I give maxCharacters a value in the markup it’s not truncating the text… Is there something I;m just clearly missing here?


#2

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.