Ionic Framework:$ scope在简单警报中未定义

时间:2016-03-23 12:04:20

标签: javascript angularjs ionic-framework angularjs-scope

.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(); ...

2 个答案:

答案 0 :(得分:8)

简答

  

此问题的根本原因是,ion-content确实创建了一个原型继承的子项   范围,这就是为什么控制器范围的goaltitle(基本类型)与您在goaltitle上使用的ng-model不同的原因

理想情况下,练习是在定义视图模型时遵循dot rule。因此,原型继承规则将遵循范围层次结构。

您应该定义对象,然后在其中分配所有ng-model属性。

<强>控制器

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

然后在其中包含goalTitleGoal等属性。

<强>标记

<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,其中我已经涵盖了所有详细信息。

答案 1 :(得分:0)

对于html

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

JS:

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