"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>

エラー：

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

また、この「データサービス」はhttpコールのgettigデータですか？もしそうなら、工場を作るのですから。ビジネスロジックのための

• コントローラ
• 工場のデータのため、私はこれを少し書き直しDOM操作用のログイン
• ディレクティブ形式

Answer 2

angular.serviceの2番目の関数引数からシングルトンサービスオブジェクトを返します。また、あなたは、コントローラの依存関係を明示している場合は、より良い/ロット明確に動作します考えている：

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

ため

フィルタのようなもののために

サービスを要求理解しやすい（私にとっては少なくとも）。 ng-repeatを呼び出すために、コードに "todos"配列を追加しました。

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" 
} 
] 
}]) 

;