javascript - Angular 服务给出 "TypeError: Cannot read property ' helloConsole' 未定义”

标签 javascript angularjs angularjs-service

我正在研究 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>

我试图做到这一点,以便当我单击“保存”时,控制台会向我显示“控制台服务”,但它给了我一个错误:

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

最佳答案

正确的 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");
    };
}]);

这也是一个“数据服务”,这是通过 http 调用获取数据吗?因为如果是这样那就建一个工厂。

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

关于javascript - Angular 服务给出 "TypeError: Cannot read property ' helloConsole' 未定义”,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36677713/

相关文章:

javascript - 为什么 window.location.href 没有完成 $.post...?

javascript - 使用 AngularJs 在自定义 TinyMCE 编辑器中添加动态数据

php - 从 NodeJS 服务器到 PHP 服务器的 CORS AJAX 请求

javascript - Angularjs - 摘要循环/重绘计时

javascript - 在 Angular 中的 Controller 之间共享数据,观看还是不观看?

javascript - Angular js指令属性和 Controller 范围

javascript - Chart.js 微软边缘显示问题

javascript - 在 Cypress 中设置本地存储

angularjs - Angular UI Grid 根据内容调整行高

javascript - 清除所有挂起的 $http 请求并在 angularjs 中重新加载页面