イオン性フレームワーク：$の範囲は、単純な警告に

Question

.controller('newGoalCtrl', function($scope, $ionicPopup) { 
    $scope.addNewGoal = function() { 
     alert($scope.goaltitle); 
    }; 
}); 

<ion-pane view-title="goal"> 
    <ion-header-bar class="bar-positive"> 
     <div class="buttons"> 
      <a nav-transition="android" class="button button-icon icon ion-arrow-left-b" ng-click="" href="#/index"></a> 
     </div> 
     <h1 class="title">Add New Goal</h1> 
    </ion-header-bar> 


    <ion-content class="padding" scroll="false" > 
     <div class="list"> 
      <label class="item item-input"> 
       <input type="text" placeholder="#Title" ng-model="goaltitle"> 
      </label> 
      <label class="item item-input"> 
       <span class="hashtag-title">#{{hashtagname}}</span> 
      </label> 
      <label class="item item-input"> 
       <textarea placeholder="Goal"></textarea> 
      </label> 
     </div> 
    </ion-content> 


    <ion-tabs class="tabs-icon-top tabs-color-active-positive"> 
     <button class="button button-positive button-bar no-round-corner" ng-click="addNewGoal()">Add Goal</button> 
    </ion-tabs> 
</ion-pane> 

を定義されていない。これは私のコードです...

...私が説明するのか分からないが、それは常に私がテキストボックスに何かを入力すると未定義言います

でも$ scope.goaltitle = "something"は.controller（）で動作しています。 ...

Answer 1

短い答え

この問題の根本的な原因は、コントローラスコープのgoaltitle（プリミティブ型）がgoaltitleと異なる理由です、ion-contentはprototypically継承された子 スコープを作成し、ありますng-model

ビューモデルを定義しながら、dot ruleに従うことが理想的です。プロトタイプの継承ルールには、スコープ階層が従うようになります。

オブジェクトを定義してから、オブジェクト内にすべてng-modelプロパティを割り当てる必要があります。

コントローラ

.controller('newGoalCtrl', function($scope, $ionicPopup) { 
    $scope.model = {}; 
    $scope.addNewGoal = function() { 
     alert($scope.model.goaltitle); 
    }; 
}); 

そして、その中にgoalTitle、Goal、などの特性を持っています。

マークアップ

<ion-content class="padding" scroll="false" > 
    <div class="list"> 
     <label class="item item-input"> 
      <input type="text" placeholder="#Title" ng-model="model.goaltitle"> 
     </label> 
     <label class="item item-input"> 
      <span class="hashtag-title">#{{hashtagname}}</span> 
     </label> 
     <label class="item item-input"> 
      <textarea placeholder="Goal" ng-model="model.Goal"></textarea> 
     </label> 
    </div> 
</ion-content> 

私は再び再書き込み全体の説明にしたくないので、ここで私は、私はすべての詳細情報を紹介してきたsimilar answerを参照しています。

<input type="text" placeholder="#Title" ng-model="foo.goaltitle"> 

JS HTML用

Answer 2

：

$scope.foo = {{ 
    goaltitle : '' 
}}