TypeError: undefined is not a function Angular

Question

I am beginner of angular.js and trying to make a dynamic template by the help of angular.js but every time I execute the code I got this error didn't understand what's the issue.Below is my code .Any help is appreciable. Error

TypeError:undefined is not a function

at linker (~/Scripts/controllers.js:30:63)
at ~/Scripts/angular.js:6758:44
at nodeLinkFn (~/Scripts/angular.js:6350:13)
at compositeLinkFn (~/Scripts/angular.js:5761:15)
at publicLinkFn (~/Scripts/angular.js:5666:30)
at boundTranscludeFn (~/Scripts/angular.js:5780:21)
at controllersBoundTransclude (~/Scripts/angular.js:6371:18)
at ngRepeatAction (~/Scripts/angular.js:19788:15)
at Object.$watchCollectionAction [as fn] (~/Scripts/angular.js:11908:13)
at Scope.$digest (~/Scripts/angular.js:12031:29) <content-item ng-repeat="item in content" content="item" class="ng-scope ng-isolate-scope">

Here is My Code

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp" class="ng-scope">
  <head runat="server">
<title>Index</title>
<script src="../../Scripts/angular.js" type="text/javascript"></script>
<script src="../../Scripts/controllers.js" type="text/javascript"></script>
</head>
<body>
    <div id="container" ng-controller="ContentCtrl">
        <content-item ng-repeat="item in content" content="item"></content-item>
    </div>
</body>
</html>

Jquery Code

var app = angular.module('myApp', []);

app.directive('contentItem', function ($compile) {    
var imageTemplate = '<div class="entry-photo"><h2>&nbsp;</h2><div class="entry-img"><span><a href="{{rootDirectory}}{{content.data}}"><img ng-src="{{rootDirectory}}{{content.data}}" alt="entry photo"></a></span></div><div class="entry-text"><div class="entry-title">{{content.title}}</div><div class="entry-copy">{{content.description}}</div></div></div>';
var videoTemplate = '<div class="entry-video"><h2>&nbsp;</h2><div class="entry-vid"><iframe ng-src="{{content.data}}" width="280" height="200" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div><div class="entry-text"><div class="entry-title">{{content.title}}</div><div class="entry-copy">{{content.description}}</div></div></div>';
var noteTemplate = '<div class="entry-note"><h2>&nbsp;</h2><div class="entry-text"><div class="entry-title">{{content.title}}</div><div class="entry-copy">{{content.data}}</div></div></div>';

var getTemplate = function (contentType) {
    var template = '';

    switch (contentType) {
        case 'image':
            template = imageTemplate;
            break;
        case 'video':
            template = videoTemplate;
            break;
        case 'notes':
            template = noteTemplate;
            break;
    }

    return template;
}

var linker = function (scope, element, attrs) {
    scope.rootDirectory = 'images/';

    element.html(getTemplate(scope.content.content_type)).show();
    $compile(element.contents())(scope);
}

return {
    restrict: "E",
    rep1ace: true,
    link: linker,
    scope: {
        content: '='
    }
};

});

function ContentCtrl($scope, $http) {
"use strict";
$scope.url = 'content.json';
$scope.content = [];    
$scope.fetchContent = function () {
    $http({ method: 'POST', url: '/Angular/GetData' }).
    success(function (data, status, headers, config) {
        console.log('HELLO! ' + data.data);
        $scope.content = data.data;
    }).
    error(function (data, status, headers, config) {
        alert("error");
    });
}

$scope.fetchContent();
}

@sbaaaang i have commented alert(); statement but the error is same. — Vipul Kumar
– Vipul Kumar, Commented May 3, 2014 at 9:32
i added an answer but please show me the line at controllers.js:30 — Filippo oretti
– Filippo oretti, Commented May 3, 2014 at 9:33

Filippo oretti · Accepted Answer · 2014-05-03 09:36:38Z

2

probably rep1ace is not right?

 return {
        restrict: "E",
        rep1ace: true,
        link: linker,
        scope: {
            content: '='
        }

to

return {
    restrict: "E",
    replace: true, //why rep1ace :D !?
    link: linker,
    scope: {
        content: '='
    }

then afaik, alert(); should be undefined in angular you should use $window.alert() instead, check if removing the alert the error appears if yes use $window wrapper

Anyway, if your error returns at controllers.js:30 show what you have at that line :)

edited May 3, 2014 at 9:36

answered May 3, 2014 at 9:31

Filippo oretti

50k96 gold badges230 silver badges351 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

TypeError: undefined is not a function Angular

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related