AngularJS not recognizing LiveScript's controller

StackOverflow https://stackoverflow.com/questions/12585407

Question

No idea what is going on here!

I keep getting the error:

Error: Argument 'TasksController' is not a function, got undefined
    at qa (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:16:79)
    at ra (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:16:187)
    at $get (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:50:411)
    at $get.f (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:42:146)
    at m (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:6:312)
    at j (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:42:8)
    at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:38:207)
    at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:38:224)
    at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:38:224)
    at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:38:224)
        ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:60

Here is my LiveScript /Scripts/app.txt file:

TasksController = (scope) ->
        scope.tasks = ["a", "b"]

Here is my html:

<!DOCTYPE html>
<html lang="en" ng-app>
<head>    
    <link href="/Styles/site.css" rel="stylesheet" />
    <link href="/Styles/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="/Styles/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script src="/Scripts/bootstrap.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
</head>
<body>

    <div ng-controller="TasksController">
        <ul>
            <li ng-repeat="task in tasks">
                {{task}}
            </li>
        </ul>
    </div>

     <script type="text/ls" src="/Scripts/app.txt"></script>    
    <script src="/Scripts/livescript.js"></script>
</body>
</html>
Was it helpful?

Solution

Just for completeness here is what I figured out.

Compile livescript file first, (for example, with Node Livescript compiler). Otherwise, "livescript.js" (inline compiler) will be too late in interpreting the script file for AngularJS to call it in time.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top