-1

Background

In angular 1.3 'You can no longer invoke .bind, .call or .apply on a function in angular expressions.'.

In angular 1.2 I was using methods on a controller/directive's scope to generate text / templates for objects in a mixed collection.

Example of the Problem

For example, this example controller contains an array containing objects of varying (non-uniform) types and structures:

app.controller('flavourText', function ($scope) {
  $scope.exampleData = {
    data: [
      {dataType: 'a', message: 'Type A String'},
      {dataType: 'b', numbers: [1,2,3,]},
      {dataType: 'a', message: 'Another Type A String'},
      {dataType: 'b', numbers: [1,3,3,7]},
      {dataType: 'a', message: 'Last Type A String'}
    ]
  };
);

Approaches

I figured out two ways to generate flavour text / switch templates:

Method 1: Using ng-if

<!-- FIRST WAY OF DOING THINGS -->
<ul>
   <li ng-repeat="item in $scope.example.data">
     <span ng-if="item.dataType === 'a'">This is an example of type A: {{item.message}}     </span>
     <span ng-if="item.dataType === 'b'">This is an example of type B: {{item.numbers}}     </span>
   </li>
</ul>

This method gets really messy/inefficient in the HTML, so I started using a second method.

Method 2: Using functions in expressions

In the controller:

 $scope.generateFlavourText = function (item){
    if (item.dataType === 'a') {
      return "This is an example of type A: " + item.message;
    } else if (item.dataType === 'b'){
      return "This is an example of type B: " + item.numbers;
    }
  };

In the template:

<!-- FOLLOWING METHOD DOES NOT WORK IN ANGULAR 1.3 -->

<ul>
  <li ng-repeat="item in $scope.example.data">
    {{generateFlavourText(item)}}
  </li>
</ul>

The Questions

Directive Formatters/Parsers

Am I supposed to be using directives and ngModel formatters/parsers for this?

Is there a better way?

Should I just give in and just revert back to method 1, which gets really messy and confusing (+ expensive unless bindonce is used).

  • Just remove $scope from $scope.example.data. – PSL Dec 18 '14 at 22:10
  • @PSL that doesn't work because {{generateFlavourText(item)}} is an expression containing a function – Rai Butera Dec 18 '14 at 22:32
  • So what.. It is on scope.. scope is implicit.. It is equivalent to $scope.generateFlavourText(item) You can have any expression in the interpolation. I did not understand what you meant by not working in 1.3. It just works if you remove $scope from ng-repeat – PSL Dec 18 '14 at 22:32
  • @PSL: Please check out the official AngularJS migration docs and see where it says: 'You can no longer invoke .bind, .call or .apply on a function in angular expressions. This is to disallow changing the behaviour of existing functions in an unforeseen fashion.' - basically you can't call functions in expressions – Rai Butera Dec 18 '14 at 22:38
  • Is that on 1.3.8? works till 1.3.7 ? It just says you cannot invoke .bind, .call or .apply because they can change the context.. It does not mean that you cannot do generateFlavourText(item), but it means you cannot do generateFlavourText.bind($parent, item)() or generateFlavourText.call(this, item) – PSL Dec 18 '14 at 22:42
0

If I understand correctly, you have an array of objects and you want to display them in different way, depending on the the type given by its property. I would create a template for each type to separate them, so they are both well organized and simple to read / enhance.

<ul>
  <li ng-repeat="item in exampleData.data" 
      ng-include="'path/to/templates/' + item.dataType + '.html'">
  </li>
</ul>

a.html:

This is an example of type A: {{item.message}}

b.html:

This is an example of type B: {{item.numbers}}

ng-include caches views, so you shouldn't be concerned with efficiency.

|improve this answer|||||
  • Wow, that' a pretty smart way of doing it! What if objects had no flag like item.dataType? For example: $scope.example.data = [{message:'this is not the same', timestamp: new Date()},{id: '1234', attributes: {message: 'as this', numbers: [1,2,3,4]}}] – Rai Butera Dec 18 '14 at 22:33
  • Well, you have to distinguish them somehow. You can iterate through them in your controller and add type property based on their structure. You may also reconsider your design as an array of completely unrelated elements is weird. – fracz Dec 19 '14 at 8:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.