Angular JS 与 state() 的双向数据绑定

这是我

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

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

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

是我做错了什么，还是这就是 Angular JS 数据绑定的工作方式？

谢谢

===========================

额外信息 ===

=========================

下面的代码无法正常工作，只有单向数据绑定。

文件：

<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
        };
    }
});

下面的代码适用于双向数据绑定。

文件：

<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
        };
    }
});

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

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

尝试实现这一点。你会明白的。

这是我的索引.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>

这是我的索引.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
        };
    }
});

这是我的第一个.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（）控制器声明晚一点，但它确实如此。

这是褶皱 https://plnkr.co/edit/JSMawagSsy4ucfW4SE8M?p=preview

相关内容

最新更新

热门标签：