javascript - solucionar - marko js
Marco iónico: $ scope no está definido en alerta simple (2)
Para el html
<input type="text" placeholder="#Title" ng-model="foo.goaltitle">
JS:
$scope.foo = {{
goaltitle : ''''
}}
.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>
Este es mi código ... No sé cómo explicarlo, pero siempre digo indefinido cuando introduzco algo en el cuadro de texto ...
pero $ scope.goaltitle = "algo" está trabajando en .controller (); ...
Respuesta corta
La causa principal de este problema es que el
ion-content
crea un alcance infantil heredado prototípicamente, porgoaltitle
el tipo degoaltitle
(tipo primitivo) del alcance del controlador es diferente delgoaltitle
que está utilizando enng-model
Lo ideal es practicar seguir dot rule
mientras se define el modelo de vista. De modo que la regla de herencia prototípica se seguirá con la jerarquía de alcance.
Debe definir el objeto y luego asignarle toda la propiedad ng-model
.
Controlador
.controller(''newGoalCtrl'', function($scope, $ionicPopup) {
$scope.model = {};
$scope.addNewGoal = function() {
alert($scope.model.goaltitle);
};
});
Luego, tenga goalTitle
, Goal
, etc. en ella.
Margen
<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>
No quiero volver a escribir toda la explicación nuevamente, así que aquí estoy haciendo referencia a una respuesta similar , donde he cubierto toda la información detallada.