角度控制器没有完成?

时间:2016-01-10 18:31:09

标签: javascript angularjs ionic-framework

好的,所以我错过了一些东西。我一直在遇到这样的问题。所以很明显我对角度的理解存在一些基本缺陷。

我有一个控制器

angular.module('NextShift')
.controller('ContactsCtrl', ['$scope','contactFactory',
    function($scope, $rootScope, Auth, $localStorage, $stateParams, contactFactory) {
       console.log("i get this far");
       function getContacts() {
        contactFactory.getContacts()
            .success(function(contactList) {
                console.log("why cant i get here");
                $scope.contacts = contactList;
            })
            .error(function(error){
                console.log("or here?");
                $rootScope.error = "Failed to get contacts";
            });
    }
}
]);

一切正在运行,我没有收到任何调试错误。然而,我的模板没有填充任何范围变量。尽管有console.log行,控制台日志也不会填充任何日志。

我的contactFactory

angular.module('NextShift').factory('contactFactory', ['$http', function($http) {
var url = 'http://myurl.example/api/v1';
var contactFactory = {};

contactFactory.getContacts = function () {
    return $http.get(url + '/contacts');
};

contactFactory.getContact = function(id) {
    return $http.get(url + '/contacts/' + id );
}

contactFactory.updateContact = function(contact){
    return $http.put(url + '/contacts/' + id, contact);
}

contactFactory.deleteContact = function(id) {
    return $http.delete(url + '/contacts/' + id);
}

return contactFactory;
}]);

那我该怎么理解?它应该至少运行console.log函数......但是......不是。这是离子框架项目的一部分,我不认为这与它有任何关系。

2 个答案:

答案 0 :(得分:2)

getContacts()声明为函数,但它在哪里被调用?你应该从控制器的某处调用getContacts()

angular.module('NextShift')
    .controller('ContactsCtrl', ['$scope', '$rootScope', 'Auth', '$localStorage', '$stateParam's, 'contactFactory',
        function($scope, $rootScope, Auth, $localStorage, $stateParams, contactFactory) {
           console.log("i get this far");

           function getContacts() {
                contactFactory.getContacts()
                .success(function(contactList) {
                    console.log("why cant i get here");
                    $scope.contacts = contactList;
                })
                .error(function(error){
                    console.log("or here?");
                    $rootScope.error = "Failed to get contacts";
                });
           }

           // do something or other
           getContacts();
       }
]);

在每个函数声明之前和之后添加一个空行确实有助于在视觉上分离代码并帮助避免这些错误。

nb:如果你想打电话给getContacts(),例如。从ng-click="getContacts()开始,您需要将其分配给$scope变量,如下所示:

$scope.getContacts = function() {....}

注意:我也修复了控制器的依赖声明 - 如果你尝试使用其中一个依赖,你的方法会抛出错误。

答案 1 :(得分:1)

首先关闭......你必须将你的依赖关系声称为字符串(在编写函数之前)...所有这些,并且以相同的顺序......所以......

.controller('ContactsCtrl', ['$scope','contactFactory',
function($scope, $rootScope, Auth, $localStorage, $stateParams, contactFactory)

应该是:

 .controller('ContactsCtrl', ['$scope', '$rootScope', 'Auth', '$localStorage', '$stateParams', 'contactFactory',
function($scope, $rootScope, Auth, $localStorage, $stateParams, contactFactory)

其次,在您的控制器中,您将需要初始化获取联系人......简单地说:

 getContacts();
如果您希望控制器加载后立即开始,请在控制器底部