AngularJS 应用程序中的数据绑定与路由

Question

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

所以这里是视图：

<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('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}} 在更改上述输入时会更新，但控制器中 $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>

完美运行。模块配置中控制器的绑定应该与常规控制器的工作方式相同！

困惑...感谢您的帮助！

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';