Note that there are some explanatory texts on larger screens.

plurals
  1. POUse a "Coffee Script Class" instead of a Method as Angular JS ng-controller
    text
    copied!<p>I want to do something that I think will be a good way to use "Coffee Script Class" and Angular JS structures.</p> <pre><code>&lt;!doctype html&gt; &lt;html ng-app&gt; &lt;head&gt; &lt;meta charset=utf-8&gt; &lt;meta name=viewport content="width=device-width, initial-scale=1"&gt; &lt;title&gt;Main Test&lt;/title&gt; &lt;link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"&gt; &lt;link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet"&gt; &lt;link href="css/style.css" rel="stylesheet"&gt; &lt;script type="text/javascript" src="js/jquery-1.8.3.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/angular.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/coffee.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div ng-controller="MainClass" style="margin-left:10px"&gt; &lt;h2&gt;All todos: {{test()}}&lt;/h2&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Notice than I setup the DIV ng-controller as MainClass and binding test() method inside a H2 HTML tag.</p> <pre><code>class AngularJSController constructor: ($scope, $main) -&gt; $scope.test = MainClass.prototype.test MainClass.test = MainClass.prototype.test $main.test = MainClass.prototype.test test = MainClass.prototype.test @test = MainClass.prototype.test console.log @test class MainClass extends AngularJSController constructor: ($scope) -&gt; super $scope, this setTimeout (-&gt; console.log test() ), 1000 test(); test: -&gt; 'aloha!' </code></pre> <p>In AngularJSController constructor I've tried all forms I imagined to setup my super class method TEST on MainClass scope without success.</p> <p>I'm trying to do it because I want to work with classes just on my Angular JS controllers and components.</p> <p>Problems I already fell:</p> <ol> <li><p>If I try to use <code>@test()</code> instead of <code>test()</code> inside setTimeout, jQuery already replaced the <code>this</code> property with a kind of JQuery Window Object.</p> <pre><code>setTimeout (-&gt; console.log @test()), 1000 </code></pre></li> <li><p>I don't know what really the scope of <code>test()</code> calls, if a place this (or @ cause Coffee), isn't the same of place anything.</p> <pre><code>test() != this.test() != @.test() # the first scope isn't the same scope of last two calls </code></pre></li> </ol>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload