角度サービスの機能を使用できません。

いくつかのng-viewに共通の値を保持するためにサービスを使用しようとしています。角度サービスの機能を使用できません。

私はこのscript.jsとabout.htmlファイルを持っています（さらに、ng-viewの場所を保持するindex.htmlと、私が関連性がないと思う他のいくつかのファイル）。

私は、ボタンを押して、私がサービスで定義したset（）メソッドを起動すると思います。

ただし、chrome（localhost：../...もちろん）のこのボタンを押すと、開発者モード（F12）でこのエラーメッセージが表示されます。 angular.js：12722 TypeError：myService .setは関数ではありません

なぜですか？私はそれを関数（定義によって）として明確に定義しています。サービスが返すオブジェクトにエラーがありますか？

script.js

<div class="jumbotron text-center"> 
    <h1>old value</h1> 
    <p>{{ message }}</p> 
    <button type="button" ng-click="updateMsg('I am in about')">Click Me</button> 
</div>

index.htmlを

<!DOCTYPE html> 
<html> 
<head> 

    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"> 
    </script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script> 
    <script src="script.js"></script> 
</head> 
<body> 

    <ul> 
    <li><a href="#"><i class="fa fa-home"></i> Home</a></li> 
    <li><a href="#about"><i class="fa fa-shield"></i> About</a></li> 
    <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li> 
    </ul> 

    <div ng-app="scotchApp" ng-view> 
    </div> 

</body> 
</html>

出典

2016-06-27 Matoy

about.html

var scotchApp = angular.module('scotchApp', ['ngRoute']); 
scotchApp.config(function($routeProvider) { 
    $routeProvider 
    .when('/', { 
    templateUrl : 'pages/home.html', 
    controller : 'SharedController' 
    }) 
    .when('/about', { 
    templateUrl : 'pages/about.html', 
    controller : 'SharedController' 
    }) 
    .when('/contact', { 
    templateUrl : 'pages/contact.html', 
    controller : 'SharedController' 
    }); 
}); 

scotchApp.factory('myService', function() { 
var savedData = {} 
var set=function (data) { 
    savedData = data; 
} 
function get() { 
    return savedData; 
} 

return { 
    set: set, 
    get: get 
} 

}); 

scotchApp.controller('SharedController', ['$scope', '$routeParams', 'myService', 
       function($scope, myService) { 


    $scope.updateMsg = function (msg) { 
    myService.set(msg); 
    $scope.message = myService.get(); 
    } 
}]);

おかげで、あなたのコントローラは、機能的に十分な引数を持っていません。これに代えて

scotchApp.controller('SharedController', ['$scope', '$routeParams', 'myService', 
       function($scope, myService) {

のそれは働いていなかった理由として

scotchApp.controller('SharedController', ['$scope', '$routeParams', 'myService', 
       function($scope, $routeParams, myService)

{

少し詳しくなければなりません。 Angularは、必要なすべてのリソース（providers）がロードされていることを確認するために、配列を使用して実行時に依存関係を把握します。関数の前の配列スペースを使用してロードするためのリストを使用します。 DIが解決すると、配列にリストされているのと同じ順序で、関数の引数にプロバイダが割り当てられます。

出典

2016-06-27 21:26:50 user3862271

角度サービスの機能を使用できません。

答えて

関連する問題