Angular services giving "TypeError: Cannot read property 'helloConsole' of undefined"

Angular services giving "TypeError: Cannot read property 'helloConsole' of undefined"

我正在学习 AngularJS 服务,但遇到了问题。

那是我的 Angular 代码:

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>

我正在努力做到这一点,以便当我单击“保存”时,控制台会显示 "console services",但它给我一个错误:

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

Return 来自 angular.service 的第二个函数参数的单例服务对象。此外,如果您明确了解控制器的依赖关系,thinks 会很有效 clearer/better:

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>

正确的Angular结构

您需要更改编写代码的方式。它应该看起来更像这样

angular.module("todoListApp", [])

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

    $scope.helloConsole = dataService.helloConsole;

}])

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

这也是一个 'data service' 这个 gettig 数据是否带有 http 调用?因为如果是这样就建一个工厂。

  • 业务逻辑控制器
  • 数据请求工厂
  • 登录等服务
  • DOM 操纵指令
  • 格式过滤器

我重写了一点以便更容易理解(至少对我而言)。 我在你的代码中添加了一个 "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"
 }
 ]
}])

;