Angular - отображать результат Todo из вызова API

Question

Я учусь с помощью простого углового приложения Todo.Пользователь должен ввести имя пользователя и отобразить список задач из API get call.Когда я оставляю вызов API вне вызова функции getTodo и напрямую включаю двухстороннее связывание с переменной области действия todos, я могу отображать задачи.Однако внутри вызова функции getTodo при успешном возврате из вызова API переменная области видимости не остается в контексте Angular.

Main Todo List
<div ng-controller="mainController">
    <form name="form1">
    <p>Enter Username:<input name="username" type="text" ng-model="username"  ng-minlength='4' required/>
         <span ng-show="form1.username.$error.minlength">Username has to be atleast 4 chars</span></p>
        <div ng-messages="form1.username.$error">
            <div ng-message="required" ng-style={color:'purple'}> get todos for test user. type your username to get and add your todos</div>
        </div>
        <div ng-model="todos"> 
            <!--<a href="#" class="btn btn-default" ng-click="getTodo()">Get Todo</a>-->
            <button class="btn btn-default" ng-click="getTodo()">Get Todo</button>
            <h3>Todos</h3>
            <ul>
                <li ng-repeat="todo in todos">
                    {{ todo.todo }}
                </li>
            </ul>
        </div>
    </form>
</div>

// MODULE
var angularApp = angular.module('angularApp',['ngRoute']);

angularApp.config(function ($routeProvider){
    $routeProvider

    .when('/', {
        templateUrl: 'pages/MainTodo.html',
        controller: 'mainController'
    })
    .when('/edittodo', {
        templateUrl: 'pages/EditTodo.html',
        controller: 'editController'
    })
});

angularApp.controller('mainController', ['$scope', '$location', '$log', '$http', 
    function ($scope, $location, $log, $http) {
    //$log.info($location.path());
    $scope.username = "test";
    $scope.todos = {};
    var uname = $scope.username;
    var getApiPath = '/api/todos/' + uname;
    $scope.getTodo = function() {
        $http.get(getApiPath)
        .success(function (result) {
            $scope.todos = result;
            console.log(result);
        })
        .error(function (data, status) {
            console.log(data);

        }); 
    };

}]);

angularApp.controller('editController', ['$scope', '$location', '$log', function ($scope, $location, $log) {
    //$log.info($location.path());
}]);

Answer 1

Проблема была с вашим тегом привязки.Он отправлял приложение не на ту страницу.Обратите внимание, как angular удаляет второй слеш из вашего URL (/ # / станет / #).Вот почему ваша страница не отображалась правильно.Я также добавил бы это как ng-href.

Просто измените свой тег href на этот, и он будет работать (добавьте и / после #):

<a ng-href="#/" class="btn btn-default" ng-model="todos" ng-click="getTodo()">Get Todo</a>

Answer 2

Удалить дополнительный атрибут ng-model:

<p>Enter Username:<input name="username" type="text"
                         ng-model="username" ̶n̶g̶-̶m̶o̶d̶e̶l̶=̶"̶t̶o̶d̶o̶s̶"̶
                         ng-minlength='4' required/>

---

Директива ng-model не работает с <a> элементами привязки.

<a href="#" class="btn btn-default" ̶n̶g̶-̶m̶o̶d̶e̶l̶=̶"̶t̶o̶d̶o̶s̶"̶  ng-click="getTodo()">
  Get Todo
</a>