ng-viewのページ間でデータを共有するために角度サービスを使用する

角度を使用して単一ページのWebアプリケーションを構築しようとしています。ng-viewのページ間でデータを共有するために角度サービスを使用する

script.js、index.html、about.htmlの3つのファイルがあります。

角度サービスを使用して共有値（他のすべてのページ、つまりcontact.html）を変更するには、about.htmlでサービスを使用します。私は、このサービスは、すべてのページを経由してアクセスすることができ、1ページが、この値を変更したら、他のすべてのページが、この新たな価値を認識することになる値（メッセージを）持っていると思います

...

用何らかの理由で以下のコードが機能しません。

なぜですか？

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 = {} 
function set(data) { 
    savedData = data; 
} 
function get() { 
    return savedData; 
} 

return { 
    set: set, 
    get: get 
} 

}); 

scotchApp.controller('SharedController', ['$scope', 'myService', function($scope, myService) { 
    myService.set('hello'); 
    $scope.message = myService.get(); 
}]);

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>

と

<div class="jumbotron text-center"> 
    <h1>old value</h1> 
    <script type="text/javascript"> 
     myService.set('hello'); 
     $scope.message = myService.get(); 
    </script> 
    <p>{{ message }}</p> 
</div>

about.html私は

出典

2016-06-25 Matoy

これは私が同様に実施したか、次のとおりです。http： //mattharris.org/2016/02/angularjs-how-to-pass-data-between-controllers/ – morissette

これをチェックする[StackOverflow answer]（http://stackoverflow.com/questions/37951818/angular-updating-controller） -scope-variable-thrファクトリー変数/ 37952079＃37952079） –

編集1：あなたが直接サービスを使用することはできません私の知る限りで見ることができます。コントローラを通過する必要があります。あなたは値を選択するには、ユーザーがクリックngのことで、私は次のように気にいらを行うだろうと言うたかったよう：

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

コントローラー：

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


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

}]);

オリジナル：

私は各ページのための異なったコントローラを作ることを提案するでしょう。しかし、注意すべき点と動作しない点は、about.htmlのjavascriptで、角度がわからない/ここに注入されたサービスとしてmyServiceにアクセスしていることです。あなたが行っている可能性が何は次のとおりです。

.when('/about', { 
    templateUrl : 'pages/about.html', 
    controller : 'AboutController' 
})

とabout.html：

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

    myService.set('About'); 
    $scope.message = myService.get(); 

}]);

、あなたルートがに変わります

<div class="jumbotron text-center"> 
    <h1>old value</h1> 
    <p>{{ message }}</p> 
</div>

出典

2016-06-25 21:09:29

ありがとう。前に試してみた。問題は、ユーザーがngフォームとngクリックで値を選択するようにしたいということです。その理由は、コントローラでこのサービスを使用したいのではなく、ビュー自体に... – Matoy

ng-viewのページ間でデータを共有するために角度サービスを使用する

答えて

関連する問題