CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scope
greengrassbluesky
greengrassbluesky

Reputation: 373

creating a new variable in directive scope

I am trying to create a brand new scope variable in the directive. It just consists of simplified version of my JSON data. I want to avoid processing complex JSON objects in the HTML hence I am trying to create a JSON data structure known only to directive.

I want to know HOW can we create a brand new variable ?

I tried something like this and Angularjs throws a bunch of errors in the console. I don't know exactly what is it complaining about. 

angularApp.directive('viewPersonData', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {
          addressData: '=',
          professionalData: '=',
          creditData: '=',
         },
       templateUrl: 'viewPersonData.html',
      link: linker
    };

function linker(scope, element, attrs) {

 scope.showData= function() {
                if( something) 
               { 

              //defining a new scope variable
              scope.employees = [];

                var firstname = "John";
                var lastname = "Smith";
                var employee = {
                    "firstname": firstname,
                    "lastname": lastname
                }

                scope.employees.push(employee);

                 return true;
              }

        }
}

});

Even though HTML template ( viewPersonData.html ) does retrieve the employee data through below code. 

<tbody ng-repeat="employee in employees">
                <tr>
                    <td class="alnLt b" >{{employee.firstname}}</td>

                    <td class="alnLt b">{{employee.lastname}}</td>
                </tr>
                </tbody>

I see following errors in the console : 

Error: 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["fn: $watchCollectionWatch; newVal: 8; oldVal: 7","fn: function (context) {\r\n          try {\r\n            for(var i = 0, ii = length, part; i<ii; i++) {\r\n              if (typeof (part = parts[i]) == 'function') {\r\n                part = part(context);\r\n                if (part == null || part == undefined) {\r\n                  part = '';\r\n                } else if (typeof part != 'string') {\r\n                  part = toJson(part);\r\n                }\r\n              }\r\n              concat[i] = part;\r\n            }\r\n            return concat.join('');\r\n          }\r\n          catch(err) {\r\n            var newErr = new Error('Error while interpolating: ' + text + '\\n' + err.toString());\r\n            $exceptionHandler(newErr);\r\n          }\r\n        }; newVal: \"John\"; oldVal: undefined","fn: function (context) {\r\n          try {\r\n            for(var i = 0, ii = length, part; i<ii; i++) {\r\n              if (typeof (part = parts[i]) == 'function') {\r\n                part = part(context);\r\n                if (part == null || part == undefined) {\r\n                  part = '';\r\n                } else if (typeof part != 'string') {\r\n                  part = toJson(part);\r\n                }\r\n              }\r\n              concat[i] = part;\r\n            }\r\n            return concat.join('');\r\n          }\r\n          catch(err) {\r\n            var newErr = new Error('Error while interpolating: ' + text + '\\n' + err.toString());\r\n            $exceptionHandler(newErr);\r\n          }\r\n        }; newVal: \"Smith\"; oldVal: undefined"],["fn: $watchCollectionWatch; newVal: 9; oldVal: 8","fn: function (context) {\r\n          try {\r\n            for(var i = 0, ii = length, part; i<ii; i++) {\r\n              if (typeof (part = parts[i]) == 'function') {\r\n                part = part(context);\r\n                if (part == null || part == undefined) {\r\n                  part = '';\r\n                } else if (typeof part != 'string') {\r\n                  part = toJson(part);\r\n                }\r\n              }\r\n              concat[i] = part;\r\n            }\r\n            return concat.join('');\r\n          }\r\n          catch(err) {\r\n            var newErr = new Error('Error while interpolating: ' + text + '\\n' + err.toString());\r\n            $exceptionHandler(newErr);\r\n          }\r\n        }; newVal: \"John\"; oldVal: undefined","fn: function (context) {\r\n          try {\r\n            for(var i = 0, ii = length, part; i<ii; i++) {\r\n              if (typeof (part = parts[i]) == 'function') {\r\n                part = part(context);\r\n                if (part == null || part == undefined) {\r\n                  part = '';\r\n                } else if (typeof part != 'string') {\r\n                  part = toJson(part);\r\n                }\r\n              }\r\n              concat[i] = part;\r\n            }\r\n            return concat.join('');\r\n          }\r\n          catch(err) {\r\n            var newErr = new Error('Error while interpolating: ' + text + '\\n' + err.toString());\r\n            $exceptionHandler(newErr);\r\n          }\r\n        }; newVal: \"Smith\"; oldVal: undefined"],["fn: $watchCollectionWatch; newVal: 10; oldVal: 9","fn: function (context) {\r\n          try {\r\n            for(var i = 0, ii = length, part; i<ii; i++) {\r\n              if (typeof (part = parts[i]) == 'function') {\r\n                part = part(context);\r\n                if (part == null || part == undefined) {\r\n                  part = '';\r\n                } else if (typeof part != 'string') {\r\n                  part = toJson(part);\r\n                }\r\n              }\r\n              concat[i] = part;\r\n            }\r\n            return concat.join('');\r\n          }\r\n          catch(err) {\r\n            var newErr = new Error('Error while interpolating: ' + text + '\\n' + err.toString());\r\n            $exceptionHandler(newErr);\r\n          }\r\n        }; newVal: \"John\"; oldVal: undefined","fn: function (context) {\r\n          try {\r\n            for(var i = 0, ii = length, part; i<ii; i++) {\r\n              if (typeof (part = parts[i]) == 'function') {\r\n                part = part(context);\r\n                if (part == null || part == undefined) {\r\n                  part = '';\r\n                } else if (typeof part != 'string') {\r\n                  part = toJson(part);\r\n                }\r\n              }\r\n              concat[i] = part;\r\n            }\r\n            return concat.join('');\r\n          }\r\n          catch(err) {\r\n            var newErr = new Error('Error while interpolating: ' + text + '\\n' + err.toString());\r\n            $exceptionHandler(newErr);\r\n          }\r\n        }; newVal: \"Smith\"; oldVal: undefined"],["fn: $watchCollectionWatch; newVal: 11; oldVal: 10","fn: function (context) {\r\n          try {\r\n            for(var i = 0, ii = length, part; i<ii; i++) {\r\n              if (typeof (part = parts[i]) == 'function') {\r\n                part = part(context);\r\n                if (part == null || part == undefined) {\r\n                  part = '';\r\n                } else if (typeof part != 'string') {\r\n                  part = toJson(part);\r\n                }\r\n              }\r\n              concat[i] = part;\r\n            }\r\n            return concat.join('');\r\n          }\r\n          catch(err) {\r\n            var newErr = new Error('Error while interpolating: ' + text + '\\n' + err.toString());\r\n            $exceptionHandler(newErr);\r\n          }\r\n        }; newVal: \"John\"; oldVal: undefined","fn: function (context) {\r\n          try {\r\n            for(var i = 0, ii = length, part; i<ii; i++) {\r\n              if (typeof (part = parts[i]) == 'function') {\r\n                part = part(context);\r\n                if (part == null || part == undefined) {\r\n                  part = '';\r\n                } else if (typeof part != 'string') {\r\n                  part = toJson(part);\r\n                }\r\n              }\r\n              concat[i] = part;\r\n            }\r\n            return concat.join('');\r\n          }\r\n          catch(err) {\r\n            var newErr = new Error('Error while interpolating: ' + text + '\\n' + err.toString());\r\n            $exceptionHandler(newErr);\r\n          }\r\n        }; newVal: \"Smith\"; oldVal: undefined"],["fn: $watchCollectionWatch; newVal: 12; oldVal: 11","fn: function (context) {\r\n          try {\r\n            for(var i = 0, ii = length, part; i<ii; i++) {\r\n              if (typeof (part = parts[i]) == 'function') {\r\n                part = part(context);\r\n                if (part == null || part == undefined) {\r\n                  part = '';\r\n                } else if (typeof part != 'string') {\r\n                  part = toJson(part);\r\n                }\r\n              }\r\n              concat[i] = part;\r\n            }\r\n            return concat.join('');\r\n          }\r\n          catch(err) {\r\n            var newErr = new Error('Error while interpolating: ' + text + '\\n' + err.toString());\r\n            $exceptionHandler(newErr);\r\n          }\r\n        }; newVal: \"John\"; oldVal: undefined","fn: function (context) {\r\n          try {\r\n            for(var i = 0, ii = length, part; i<ii; i++) {\r\n              if (typeof (part = parts[i]) == 'function') {\r\n                part = part(context);\r\n                if (part == null || part == undefined) {\r\n                  part = '';\r\n                } else if (typeof part != 'string') {\r\n                  part = toJson(part);\r\n                }\r\n              }\r\n              concat[i] = part;\r\n            }\r\n            return concat.join('');\r\n          }\r\n          catch(err) {\r\n            var newErr = new Error('Error while interpolating: ' + text + '\\n' + err.toString());\r\n            $exceptionHandler(newErr);\r\n          }\r\n        }; newVal: \"Smith\"; oldVal: undefined"]]
    at Error (native)
    at Object.Scope.$digest (angular.js:8841:61)
    at Object.Scope.$apply (angular.js:9012:24)
    at done (angular.js:10265:45)
    at completeRequest (angular.js:10449:7)
    at XMLHttpRequest.xhr.onreadystatechange (angular.js:10404:11)

Upvotes: 1

Views: 2537

Answers (2)

Carlos Pliego
Carlos Pliego

Reputation: 869

Get rid of the linker and use the controller attribute of the directive,

controller: (['$scope', function($scope) {
    $scope.employees = [{
      "firstname": firstname,
      "lastname": lastname
    }];
  }
])

This creates the employees data structure. Pass the function inside the array. Otherwise, if minifier is used, webpack will replace $scope by some alphabet. Then it won't work in the production.

If not passed inside the array, you'll get the error Error Reference/ $injector/ unpr in the production environment.

Upvotes: 3

BatteryAcid
BatteryAcid

Reputation: 8881

Here is a working plunker Example New Variable.

I set it up so that the showData() is called when clicking a link. I would recommend using your controller only for initialization. There's no harm in initializing your employees inside the controller like @Carlos suggested, but if it isn't needed then you can create it within the showData method you have in your link.

Directive:

<custom></custom>

If you are having other issues check your directive setup.

Upvotes: 0

Related Questions