앵글 서비스 기능을 사용할 수 없습니다.

일부보기를 위해 일부 값을 공유하기 위해 서비스를 사용하려고합니다.앵글 서비스 기능을 사용할 수 없습니다.

나는 아래 script.js와 about.html 파일을 가지고 있으며 (ng-view 장소와 관련성이없는 다른 파일들을 가지고있는 index.html을 더한 것).

나는 서비스에서 정의한 set() 메서드를 활성화하기 위해 버튼을 눌렀을 때 예상했다.

그러나 크롬에서이 버튼을 누르면 (localhost : ../... 물론) 개발자 모드 (F12)에서이 오류 메시지가 표시됩니다. angular.js : 12722 TypeError : myService .set은 함수가 아닙니다.

왜? 필자는이를 정의로 정의했다. 서비스가 반환하는 개체에 오류가 있습니까?

감사

script.js

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

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

index.html을

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

about.html 기본이 컨트롤러는 기능에 충분한 인수가 없습니다. 그래서 대신

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

앵글 서비스 기능을 사용할 수 없습니다.

답변

관련 문제