离子框架:$scope 在简单警报中未定义 [英] Ionic Framework: $scope is undefined in simple alert

问题描述

.controller('newGoalCtrl', function($scope, $ionicPopup) {$scope.addNewGoal = function() {警报($scope.goaltitle)；};});<ion-pane view-title="目标"><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>

<h1 class="title">添加新目标</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 class="item item-input"><span class="hashtag-title">#{{hashtagname}}</span><label class="item item-input"><textarea placeholder="目标"></textarea>

</离子含量><ion-tabs class="tabs-icon-top tabs-color-active-positive"><button class="button button-positive button-bar no-round-corner" ng-click="addNewGoal()">添加目标</button></ion-tabs></ion-pane>

这是我的代码...我不知道如何解释，但是当我在文本框中输入内容时它总是说未定义...

但是 $scope.goaltitle = "something" 正在处理 .controller();...

解决方案

简短回答

<块引用>

这个问题的根本原因是，ion-content 确实创建了一个原型继承的孩子范围，这就是为什么控制器范围的 goaltitle(原始类型)与您在 ng-model

上使用的 goaltitle 不同的原因

理想的做法是在定义视图模型时遵循dot rule.因此，原型继承规则将遵循范围层次结构.

您应该定义对象，然后分配其中的所有 ng-model 属性.

控制器

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

然后在其中包含 goalTitle、Goal 等属性.

标记

<label class="item item-input"><span class="hashtag-title">#{{hashtagname}}</span><label class="item item-input"><textarea placeholder="Goal" ng-model="model.Goal"></textarea>

</离子含量>

我不想再次重写整个解释，所以在这里我引用了类似的答案，我已经介绍了所有详细信息.

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

This is my code... I don't know how to explain but it always say undefined when I enter something on the text box...

but $scope.goaltitle = "something" is working on the .controller(); ...

解决方案

Short Answer

The root cause of this issue is, ion-content does create a prototypically inherited child scope, that's why goaltitle(primitive type) of controller scope is different than the goaltitle you are using on ng-model

Ideally practice is to follow dot rule while defining view model. So that prototypal inheritance rule will get followed with scope hierarchy.

You should define object and then do assign all the ng-model property in it.

Controller

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

Then have goalTitle, Goal, etc. property in it.

Markup

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

I don't want to re-write whole explanation again, so here I'm referencing similar answer, where I've covered all detailed information.

这篇关于离子框架:$scope 在简单警报中未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！