• angular input标签只能单向传递数据的问题


    angularjs input标签只能单向传递数据的问题

     <ion-view title = "{{roomName}}" style = "height:90%;margin-top: 45px "  ng-init = "init()">
                <ion-pane>
                <ion-content zooming = "true"  class = "no-header">
                    <ion-list>
                        <ion-item class="item item-input-inset">
                            <label class="item-input-wrapper">
                                <input type="text" placeholder="Your Message To Send" ng-model = "myMessage">
                            </label>
                            <button class="button button-small" ng-click = "sendMyMessage()">
                                发送
                            </button>
                        </ion-item>
                    </ion-list>
                </ion-content>
                </ion-pane>
    
                <ion-pane style = "margin-top: 55px">
                <ion-content zooming = "true" class = "no-header" style = "margin-bottom: 50px">
                    <ion-list>
                        <ion-item class = "item item-avatar-left my-item"
                                 collection-repeat = "message in messages"
                                 collection-item-width="'100%'"
                                 collection-item-height="75">
                            <img ng-src="{{message.user.avatarUrl}}">
                            <h2>{{message.user.name}}:</h2>
                            <p>{{message.content}}</p>
    
                        </ion-item>
                    </ion-list>
    
                </ion-content>
            </ion-pane>
            </ion-view>
    

    我的controller

    atMoon.controller('roomCtrl',['$scope','myService', function ($scope, myService) {
    
    
        $scope.sendMyMessage = function () {
            console.log($scope.myMessage)
            myService.sendMyMessage($scope, $scope.myMessage)
        }
        $scope.init = function () {
            myService.getMessages($scope);
        }
    }])
    

    打印的$scope.myMessage一直是undefine,如果我在controller中写上$scope.myMessage = "xxxx"能再界面中显示,所以数据只能从模型到视图,不能从视图到模型,求大神解答万分感谢

    我怀疑你这是被 scope 的原型继承坑了

    像 ion-content 这些指令都是有各自的 scope 的,然后你在视图里写上 ng-model="myMessage" ,其实你在输入框填入的内容是放到了 ion-item 的 scope 上了,而你的 roomCtrl 的 scope 里的 myMessage 依旧是 undefined ;而当你在控制器里给 myMessage 赋值完了以后,由于 ion-item 的 scope 上还没有 myMessage 属性,所以就会从原型链上找,进而找到了 roomCtrl 的 scope 上的 myMessage 。

    这是我常用的解决方案:

    $scope.ctrlScope = $scope
    
    <input ng-model="ctrlScope.myMessage" />
    
    0

    我也遇到了这个问题,貌似事angular.js-1.3.0版本的问题,低版本没出现过,进过测试实验,将myMessage放到一个Object中如下,可以测试通过,也不知道为啥(可能新版angular的优化了watch,watch过多会影响效率):

    controller中设置
    $scope.Messages={myMessage:""}

     $scope.sendMyMessage = function () {
            console.log($scope.Messages.myMessage);
        }
    
    <input ng-model="Messages.myMessage" />
    
    
    另外我用angular.js正在开发webapp,可以交流下,http://php.xlanlab.com/webapp/mobile-angular-ui-master/my/index.html
  • 相关阅读:
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    并行导致的进程数过大无法连接数据库
    Oracle 等待事件(Wait Event):Sync ASM rebalance 解析
    2套RAC环境修改scanip后客户端连接异常
    数据流通技术工具
    Hack The Box——Scavenger
    MySQL中InnoDB引擎对索引的扩展
    30分钟,教你从0到1搞定一次完整的数据可视化分析!
    【2020-MOOC-浙江大学-陈越、何钦铭-数据结构】树和堆(第五周的笔记和编程作业)
  • 原文地址:https://www.cnblogs.com/shenbin/p/5645022.html
Copyright © 2020-2023  润新知