角/离子 - 模型不更新控制器$范围 [英] angular/ionic - model does not update $scope in controller
问题描述
我与angularjs对于新手，我想，我相信应该是很简单的事......但事实证明我不是想出来的。
I am a newb with angularjs and I am trying something that I believe should be very simple ... but turns out I am not figuring it out.
我有我要仔细绑定（使用 NG-模型），以一个textarea一个 $范围变量。我能够使它在爵士小提琴网站工作，但现在我的code。我试图剥夺一切都下降到只有几行，它仍然无法正常工作，控制器永远不会更新。
I have a $scope variable that I want to double bind (using ng-model) to a textarea. I was able to make it work on js fiddle websites but now on my code. I have tried to strip everything down to just a few lines and it still doesn't work, the controller is never updated.
这是我的code：
JS / main.js
js/main.js
var app=angular
.module('noclu', ['ionic', 'app.controllers'])
.config(function ($stateProvider, $urlRouterProvider){
$stateProvider
.state('menu.main', {
url: "/main",
views: {
'menuContent': {
templateUrl: 'templates/main.html',
controller: 'MainCtrl'
}
}
});
$urlRouterProvider.otherwise("/menu/main");
});
JS / controller.js
js/controller.js
angular
.module('app.controllers', [])
.controller('MainCtrl', function ($scope){
$scope.src='---';
$scope.get_feeds=function(){
//seems like that here "this" is actually the textarea ??
//$scope.src is always whatever has been set in the controller
console.log('this:'+this.src); //this output whatever I enter in the textarea
console.log('scope:'+$scope.src); //this always output '---'
};
});
index.html的
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link rel="icon" type="image/png" href="favicon.png">
<title>NoClu</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/main.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-app="noclu">
<ion-nav-view></ion-nav-view>
</body>
</html>
模板/ main.html中
template/main.html
<ion-view view-title="NoClu" >
<ion-content class="padding" id="src-wrapper-center">
<div ng-class="vertical_center">
<div id="src-wrapper">
<div>
<div class="padding src-title">What are you in the mood for ?</div>
<div class="item" id="src-txt-wrapper">
<textarea id="src" ng-model="src"></textarea>
</div>
<button id="search" class="button button-block button-large button-balanced" ng-click="get_feeds()" >
Let's eat
</button>
</div>
</div>
</div>
</ion-content>
</ion-view>
更新 - ？我做了工作，但为什么
我把它通过改变工作 $ scope.src ='---'; 到 $ scope.src = {体： - - '}; ，然后改变 NG-模式到 src.body 。但..为什么没有合作的其他方式，因为它适用于布尔？
I made it work by changing $scope.src='---'; to $scope.src={body:'---'}; and then changing the ng-modal to src.body. but.. WHY did not work the other way as it works for boolean?
推荐答案
直接使用$范围。是不是在angularJS一个很好的做法。有各种不同的职位吧，比较concernign $范围的传承。
对于为例： http://learnwebtutorials.com/why-ng-模型的价值应包含中，一个点
Using directly $scope. is not a good practice in angularJS. There are various post of it, more concernign $scope inheritence. For exemple : http://learnwebtutorials.com/why-ng-model-value-should-contain-a-dot
因此，你需要改变你的模型那样：
Therefore, your need to change your model like that :
$scope.myModel = {};
$scope.myModel.src = "---"
和你的HTML绑定到 myModel.src
And your html to bind to myModel.src
这篇关于角/离子 - 模型不更新控制器$范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
