Statement: I have had this problem many times before and it always seems to be random.
Define Random: Random as in which properties it does this to, the result is reproducible between debugging sessions, and on multiple environments/browsers.
Behavior: My issue is the textarea
with ng-model="sometext"
is binding to this.sometext
instead of $scope.sometext
. When I enter "hello"
into the textarea and place a breakpoint in chrome and inspect the value of $scope.sometext
it is ""
but when I inspect this.sometext
it is "hello"
.
Background: All of the other properties (not shown for brevity) bind correctly to $scope
but this specific one does not. I am not using controllerAs
Question: Why does this happen? and how do I fix it so it binds correctly to $scope
instead of this
Code:
Controller:
1 angular.module 'myApp'
2 .controller 'HomeController', ($scope, Engine) ->
3 $scope.playButtonText = 'Play'
4 $scope.sometext = '' #<- Setting initial value
5
6 $scope.play = ->
7 if $scope.playButtonText is 'Play'
8 $scope.playButtonText = 'Stop'
9 promise = Engine.play $scope.sometext
10 if promise is false
11 $scope.playButtonText = 'Play'
12 else
13 promise.then ->
14 $scope.playButtonText = 'Play'
15 else $scope.playButtonText = 'Play'
View:
ion-view(title='My Title')
ion-content
h2(class='text-center') Enter text, choose playback, choose speed, and press play
div(class='list')
label(class='item item-input')
# THIS TEXTAREA IS THE ONE
textarea(placeholder='Enter some text to translate', ng-model='sometext')
button(type='button', class='button button-full button-stable', ng-click='play()') {{playButtonText}}
Config:
angular.module('myApp', ['ionic'])
.config ($stateProvider, $urlRouterProvider) ->
$stateProvider
.state 'tab',
url: "/tab"
abstract: true,
templateUrl: "templates/tabs.html"
.state 'tab.home',
url: '/home'
views:
'tab-home':
templateUrl: 'templates/tab-home.html' #<- This is the view
controller: 'HomeController' #<- This is the controller
$urlRouterProvider.otherwise '/tab/home'
Engine:
angular.module 'morsecode'
.factory 'Engine', ($q) ->
Engine = {}
Engine.play = (text) ->
if text.length is 0
return false
upper = text.toUpperCase()
phrase = ''
for letter in upper
phrase += Engine.encodeLetter letter
deferred = $q.defer()
Engine.loop phrase, 0, Engine, deferred
return deferred.promise
return Engine
Not sure how the Engine code is relevant, but there it is (methods not related not included, it is rather complex with setTimeout
s calling setTimeout
s and lots of recursive code)
Debugging Image: