Угловые сервисы, дающие «TypeError: Не удается прочитать свойство« helloConsole »неопределенного»

Question

Я изучаю услуги AngularJS, и у меня проблема.

Это мой Угловой код:

var app = angular.module("todoListApp"); 
 

 
app.controller('MainController', MainController); 
 

 
MainController.$inject = ['$scope']; 
 

 
function MainController($scope, dataService){ 
 
    $scope.helloConsole = dataService.helloConsole; 
 
}; 
 

 
app.service('dataService', function(){ 
 
    this.helloConsole = function(){ 
 
     console.log("console services"); 
 
    }; 
 
});

That's my HTML Code 
 

 
<div ng-controller="MainController" class="list"> 
 
<div class="item" ng-class="{'editing-item' : editing, 'edited': todo.edited}" ng-repeat="todo in todos"> 
 
     <div class="actions"> 
 
      <a href="" ng-click=" editing = !editing">Edit</a> 
 
      <a href="" ng-click="helloConsole()">Save</a> 
 
      <a href="" class="delete">Delete</a> 
 
     </div> 
 
</div> 
 
</div>

Я пытаюсь сделать так, чтобы при нажатии на Save, консоль показывает мне «консольные услуги», но это дает мне ошибка:

angular.js:13424 TypeError: Cannot read property 'helloConsole' of undefined

Answer 1

Правильная Угловая структура

вам нужно изменить способ написали свой код. Он должен больше походить на это

angular.module("todoListApp", []) 

.controller('MainController', ['$scope', 'dataService', function($scope, dataService){ 

    $scope.helloConsole = dataService.helloConsole; 

}]) 

.service('dataService', [function(){ 
    this.helloConsole = function(){ 
     console.log("console services"); 
    }; 
}]); 

Также это «служба данных» - это данные gettig с помощью http-вызова? Потому что если так, то сделайте завод.

• Контроллеры для бизнес-логики
• Фабрики для данных запросов
• Услуги для вещей, как логин
• директивы для манипулирования DOM
• Фильтры для формата

Answer 2

Возвращение одноэлементно объект службы от второго аргумента функции angular.service «s. Кроме того, если вы четко о зависимостях контроллера, думает будет работать намного яснее,/лучше:

var app = angular.module("todoListApp", []); 
 

 
app.controller('MainController', ['$scope', 'dataService', MainController]); 
 

 
function MainController($scope, dataService){ 
 
    $scope.helloConsole = dataService.helloConsole; 
 
    $scope.todos = [{txt:"todo 1"}, {txt:"todo 2"}]; 
 
} 
 

 
app.service('dataService', function(){ 
 
    return { 
 
     helloConsole: function(){ 
 
     console.log("console services"); 
 
     } 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script> 
 

 
<div ng-app="todoListApp"> 
 
<div ng-controller="MainController" class="list"> 
 
    <div class="item" ng-class="{'editing-item' : editing, 'edited': todo.edited}" ng-repeat="todo in todos"> 
 
    {{todo.txt}} 
 
    <div class="actions"> 
 
     <a href="" ng-click=" editing = !editing">Edit</a> 
 
     <a href="" ng-click="helloConsole()">Save</a> 
 
     <a href="" class="delete">Delete</a> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div>

Answer 3

я переписал это немного так что это легче понять (по крайней мере для меня). Я добавил массив «todos» к вашему коду, чтобы сделать огонь ng-repeat.

var app = angular.module("todoListApp",[]) 

.service('dataService', function(){ 
this.helloConsole = function(){ 
    console.log("console services"); 
}; 
}) 

.controller('MainController', [ '$scope', 'dataService',function ($scope,dataService) { 
$scope.helloConsole = dataService.helloConsole; 
$scope.todos = [ { 
    "todo":"1" 
} 
] 
}]) 

;