Angular ngModel指令绑定到`this`而不是`$ scope`

时间:2014-11-29 20:16:36

标签: angularjs angularjs-scope angular-ui-router ionic-framework

声明:我以前曾多次遇到此问题,而且似乎总是随机的。

定义随机:随机执行此操作的属性,结果可在调试会话之间以及多个环境/浏览器之间重现。

行为:我的问题是textarea ng-model="sometext"绑定到this.sometext而不是$scope.sometext。当我在textarea中输入“hello"并在chrome中放置一个断点并检查$scope.sometext的值时,""this.sometext但当我检查"hello"时它是{{1} }。

背景:所有其他属性(为简洁起见未显示)都正确绑定到$scope,但这个特定的属性没有。我使用controllerAs

问题:为什么会这样?以及如何修复它以便正确绑定到$scope而不是this

代码:

控制器:

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'

查看:

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}}

配置:

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'

发动机:

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

不确定引擎代码是如何相关的,但它是(没有包含相关的方法,它与setTimeout调用setTimeout和许多递归代码相当复杂)

调试图片:

Debugging Image

0 个答案:

没有答案