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

AngularJS app中的数据绑定与路由

1 个答案: