javascript - 使用路由在 AngularJS 应用程序中进行数据绑定(bind)

Question

我正在使用 Ionic 启动一个新的 Phonegap 应用程序。它依赖于 Angular。

这是 View :

<ion-view title="'Login'" left-buttons="leftButtons">
    <ion-content has-header="true">
        <input type="text" ng-model="new_name" placeholder="Name">
        {{new_name}}
        <input type="text" ng-model="new_text" placeholder="Message..." ng-keydown="addMessage($event)">
    </ion-content>
</ion-view>

Controller :

.controller('LoginCtrl', function($scope) {
        $scope.new_name = "ininame";

        $scope.addMessage = function(e) {
            console.log($scope);
            if (e.keyCode != 13) return;
            console.log({name: $scope.new_name, text: $scope.new_text});
        };
    })

和配置:

.state('eventmenu.login', {
                url: "/login",
                views: {
                    'menuContent' :{
                        templateUrl: "templates/login.html",
                        controller: "LoginCtrl"
                    }
                }
            })

因此 {{new_name}} 在更改上述输入时更新，但 Controller 中 $scope.new_name 的值仍然是“ininame”并且永远不会改变。触发该功能时，console.log 显示如此。

请注意，如果我像这样添加一个带有 ng-controller = "LoginCtrl"的 div :

<ion-view title="'Login to Wallit'" left-buttons="leftButtons">
    <ion-content has-header="true">
        <div ng-controller="LoginCtrl">
        <div ng-repeat="msg in messages"><em>{{msg.name}}</em>: {{msg.text}}</div>
        <input type="text" ng-model="new_name" placeholder="Name">
        {{new_name}}
        <input type="text" ng-model="new_text" placeholder="Message..." ng-keydown="addMessage($event)">
        </div>
    </ion-content>
</ion-view>

它工作得很好。模块配置中 Controller 的绑定(bind)应该与常规 Controller 的工作方式相同!

困惑...在此先感谢您的帮助!

Answer 1

读一读:http://jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html

本质上，您需要更好地理解嵌套作用域的工作原理。如果将模型值封装在容器对象中，您遇到的问题应该会消失。

ng-model="mycontainer.new_name"
{{mycontainer.new_name}}
$scope.mycontainer.new_name = 'ininame';