angularjs - Using watch or ng-bind in angular but with "Controller as" methodology -


i'm learning angularjs without using $scope, using "this" "controller controlinstance" method.

i've websocket receives message , when happens, change value , must show on dom @ real time.

basically i've this:

angular.module('wolfie.wsocket', [])     .controller('wolfie.wsocketcontroller', function() {         var soquete = this;         soquete.sockstate = "off";         soquete.socket = new websocket(url_websocket_server);         soquete.socket.onopen = function (ev) {             console.log("open");             soquete.sockstate = "connection open";             soquete.getstatus();         };         soquete.getstatus = function() {             console.log("test status");             console.log(soquete.sockstate);             return soquete.sockstate;         };  ... 

and html:

<div ng-controller="wolfie.wsocketcontroller websocket"> {{websocket.sockstate}} 

so how can show soquete.sockstate property when changes? {{soquete.sockstate }} doesn't work

thanks , kind regards

you need use alias specify controller instance:

e.g.

<div ng-controller="wolfie.wsocketcontroller somealias">{{somealias.sockstate}}</div> 

additionally, since sockstate updated outside of angular context, need make angular aware of change using $scope.$apply() (for you'll need $scope of course):

.controller('wolfie.wsocketcontroller', function ($scope) {     ...     soquete.socket.onopen = function (ev) {         $scope.$apply(function () {             console.log("open");             soquete.sockstate = "connection open";             soquete.getstatus();         });     }; }); 

update author, in comments:

there no way without $scope. $scope there implicitly anyway (ng-controller="x y" does: $scope.y = this). advantage of using controlleras syntax being more declarative in view , being able access properties when using nested controllers (or more clear controller properties accessing).


Comments

Popular posts from this blog

javascript - RequestAnimationFrame not working when exiting fullscreen switching space on Safari -

jsf - How to ajax update an item in the footer of a PrimeFaces dataTable? -

django - CSRF verification failed. Request aborted. CSRF cookie not set -