Question

对我来说，我有一个非常愚蠢的，我一整天都在看这段代码而没有结果。

我有一个简单的文本框，它通过控制器并更新服务中的变量（该服务最终会从其他地方获取/更新数据）。

目前，我能够一直检索变量值到视图并且它可以正常工作，但是文本框无法更新服务中的变量，以便再次在视图中显示新的变量值....

我非常感谢任何帮助，希望我有道理！

// APP/APP.JS
(function(){
    var app = angular.module('appMod', ['ngRoute', 'ngAnimate']);

    app.config(function ($routeProvider) {
        $routeProvider
            .when('/',
            {
                controller: 'introController',
                templateUrl: 'app/partials/intro.html'
            })
            .otherwise({ redirectTo: '/' });
    });

    app.controller('nameController', function($scope, dataService) {

        var nameValue;

        this.name = dataService.getName();

        this.submitName = function(nameVal) {
            nameValue = this.nameCtrl.nameVal;
            dataService.setName(nameValue);
        };


    });

    app.controller('introController', function($scope, dataService) {

        this.name = dataService.getName();

    });

    app.service('dataService', function () {
        var name = "f";
        this.getName = function() {
            return name;
        };

        this.setName = function(nameVal) {
            name = nameVal;
        };
    });


})();

<!-- INDEX.HTML -->
<!DOCTYPE html>

<html ng-app="appMod">
<head>
    <link rel="stylesheet" type="text/css" href="content/css/normalize.css">
    <link rel="stylesheet" type="text/css" href="content/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="content/css/style.css">
    <link rel="stylesheet" type="text/css" href="content/css/animation.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript" src="scripts/bootstrap.min.js"></script>
    <script type="text/javascript" src="scripts/angular.min.js"></script>
    <script type="text/javascript" src="scripts/angular-route.min.js"></script>
    <script type="text/javascript" src="scripts/angular-timer.min.js"></script>
    <script type="text/javascript" src="scripts/angular-animate.min.js"></script>
    <script type="text/javascript" src="app/app.js"></script>
</head>
<body>
<div class="container">
    <div class="row" ng-controller="nameController as nameCtrl">
        <img src="content/images/sitelogo.png" class="logo">
        <h2 class="welcomeMessage fade">Welcome <span class="fade" ng-show="!nameCtrl.name == ''">{{nameCtrl.name}}</span><span class="inline fade" ng-hide="nameCtrl.name !== ''">Friend</span> <small>(We like to get personal!)</small></h2>
        <div class="namebox fade">
            <h2>Welcome <small class="fade">Please type your name</small></h2>
            <form class="fade">
                <div class="form-group">
                    <input type="text" class="form-control" ng-model="nameCtrl.nameVal" autofocus>
                </div>
                <button type="submit" style="width:100%;" class="btn btn-default fade" ng-click="nameCtrl.submitName()" >Submit</button>
            </form>
        </div>
    </div>
</div>
    <div ng-view></div>
</body>
</html>

Answer 1

您需要在输入

上绑定名称而不是nameVal

然后在你的setName调用中传递它，我不认为那里需要其余的代码，你也可以删除nameValue var。

    this.submitName = function() {
        dataService.setName(this.name);

    };

nameValue var是控制器的本地变量，并且在$ scope上不可用于绑定到您的视图，所以即使您正在更改它，视图也不知道它，因为它看不到var。 / p>

更新Service中的变量

1 个答案: