个人中心
gpt4 book ai didi

javascript - Angular/ ionic - 模型不会更新 Controller 中的 $scope

转载 作者：行者123 更新时间：2023-11-28 19:10:15 27 4
gpt4 key购买 nike

我是 angularjs 的新手，我正在尝试一些我认为应该非常简单的东西......但事实证明我没有弄清楚。

我有一个 $scope 变量，我想将其双重绑定(bind)(使用 ng-model)到文本区域。我能够让它在 js fiddle 网站上工作，但现在在我的代码上工作。我尝试将所有内容精简为几行，但它仍然不起作用， Controller 从未更新。

这是我的代码:

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

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

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

<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={body:'---'}; 使其正常工作然后将 ng-modal 更改为 src.body 。但是..为什么不像 bool 值那样以其他方式工作？

最佳答案

直接使用$scope。在 AngularJS 中这不是一个好的实践。有各种帖子，更多关注 $scope 继承。例如:http://learnwebtutorials.com/why-ng-model-value-should-contain-a-dot

因此，您需要像这样更改模型:

$scope.myModel = {};
$scope.myModel.src = "---"

以及要绑定(bind)到 myModel.src

的 html

关于javascript - Angular/ ionic - 模型不会更新 Controller 中的 $scope，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30850012/

27 4 0
文章推荐： javascript - 将 JSON 结果添加到 JavaScript 列表
文章推荐： html - float block 级元素 : is it necessary to set the width, 如果是，如何？
文章推荐： ios - 写入文件 :atomically: not saving new plist data
文章推荐： ios - 如何将 UITableViewCell 的 contentView 重新定位到左侧或右侧？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com