Question

这是我定义控制器时的一个例子。

.state('login', {
        url: '/login',
        templateUrl: 'templates/login.html',
        controller: loginCtrl
})

但是我发现当我使用上面的代码而不是在指令中定义控制器时，只有一种方式绑定。这意味着在视图中输入的数据无法传递回控制器。

我做错了什么，或者Angular JS数据绑定的工作原理是什么？

由于

=========================额外信息==================== =====

以下代码无法正常运行，只有单向数据绑定。

HTML文件：

<div class="list padding">
    <label class="item item-input rounded-box">
        <input type="text" placeholder="Username" ng-model="username">
     </label>

     <label class="item item-input rounded-box">
         <input type="password" placeholder="Password" ng-model="password">
     </label>
</div>

JS文件：

.config(function($stateProvider, $urlRouterProvider) {

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

JS控制器：

.controller('LoginCtrl', function ($scope, $http) {

    $scope.username = "";
    $scope.password = "";

    $scope.loginProcess = function () {

        var JSON_data = {
            email: $scope.username,
            password: $scope.password
        };
    }
});

以下代码用于双向数据绑定。

HTML文件：

<div class="list padding"  ng-controller="LoginCtrl">
    <label class="item item-input rounded-box">
        <input type="text" placeholder="Username" ng-model="username">
     </label>

     <label class="item item-input rounded-box">
         <input type="password" placeholder="Password" ng-model="password">
     </label>
</div>

JS文件：

.config(function($stateProvider, $urlRouterProvider) {

    .state('login', {
        url: '/login',
        templateUrl: 'templates/login.html'
    })
}

JS控制器（无变化）：

.controller('LoginCtrl', function ($scope, $http) {

    $scope.username = "";
    $scope.password = "";

    $scope.loginProcess = function () {

        var JSON_data = {
            email: $scope.username,
            password: $scope.password
        };
    }
});

问题是为什么第一种方法不能用于双向数据绑定？

Answer 1

视图中输入的数据始终可以与控制器绑定。您所要做的就是在控制器中使用$ scope来定义变量并从视图中更改它。您将在控制器中获得的最后一个值将更新为一个。

尝试实现此目的。你会明白的。

这是我的index.html

<html>
    <head>
        <script src="bower_components/jquery/dist/jquery.js"></script>
        <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
       <script type="text/javascript" src="bower_components/angular/angular.js"></script>
       <script type="text/javascript" src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>

       <script type = "text/javascript" src = "index.js"></script>
    </head>
    <body ng-app="myApp">
        <div ui-view>
        </div>

    </body>
    </html>

这是我的index.js

angular.module("myApp",['ui.router'])

.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('login', {
        url: '/login',
        templateUrl: 'first.html'
    })
    $urlRouterProvider.otherwise('/login');
})

.controller('LoginCtrl', function($scope, $http) {

    $scope.username = "x";
    $scope.password = "x";

    $scope.loginProcess = function () {

        var JSON_data = {
            email: $scope.username,
            password: $scope.password
        };
    }
});

这是我的first.html

<div class="list padding"  ng-controller="LoginCtrl">
    <label class="item item-input rounded-box">
        <input type="text" placeholder="Username" ng-model="username">
     </label>

     <label class="item item-input rounded-box">
         <input type="password" placeholder="Password" ng-model="password">
     </label>
</div>

它确实绑定了。它绑定的时间比state（）控制器声明稍晚，但确实如此。

以下是plunker https://plnkr.co/edit/JSMawagSsy4ucfW4SE8M?p=preview

Angular JS双向数据绑定与state（）

1 个答案: