Question

我正在学习一个简单的Todo角度应用程序。用户必须键入用户名并显示来自API get调用的待办事项列表。当我将API调用保留在getTodo函数调用之外并直接使用todos作用域变量启用2向绑定时，我能够显示todos。但是在getTodo函数调用中，从API调用成功返回后，todos范围变量不会保留在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

删除额外的public function DownloadImages(){ $img = 'http://daytodata.net/wp-content/uploads/2018/09/Dise%C3%B1o-sin-t%C3%ADtulo-35.png'; $dest = APPPATH."temp"; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $img); curl_setopt($ch, CURLOPT_RETURNTRANSFER,1); curl_setopt($ch, CURLOPT_HEADER , 0); curl_setopt($ch, CURLOPT_VERBOSE, 0); curl_setopt($ch, CURLOPT_TIMEOUT, 10); $result = @curl_exec($ch); $curl_err = curl_error($ch); curl_close($ch); if (empty($curl_err)) { file_put_contents($dest, $result); } }属性：

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>

Answer 2

问题出在您的锚标记上。它将应用程序发送到错误的页面。请注意，angular如何从网址中删除第二个正斜杠（/＃/将变为/＃）。这就是为什么页面显示不正确的原因。我也将其添加为ng-href。

只需将href标签更改为此，它将起作用（在＃后面添加和/）：

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

角度-API调用显示的待办事项结果

2 个答案: