Question

我知道这个问题已被问过几次，但是在阅读了无数线索之后我还没有成功实现这个问题......对我感到羞耻。

我知道这是很多代码（对不起）。但我无法找到我做错的事，所以对于这个问题，我想在pat1的列表中添加一些东西，然后点击pat2并查看相同的列表。

路由;

var routeApp = angular.module('routeApp', ['ngRoute', 'rootMod']);

routeApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
    when('/pat1', {
        templateUrl: 'partials/pat1.html',
        controller: 'pageOneCont'
    }).
    when('/pat2', {
        templateUrl: 'partials/pat2.html',
        controller: 'pageTwoCont'
    }).
    otherwise({
        redirectTo: '/pat1'
    });
}]);

控制器＆amp;服务：

    var rootMod = angular.module('rootMod', []);


rootMod.controller('pageOneCont', [ 'serv', '$scope', function (serv, $scope) {
    'use strict';

    // Your controller implementation goes here ...
    $scope.handleClick = function ($scope, serv){
        var updateFoo = function(){
            $scope.foo = serv.foo;
        };

        aService.registerObserverCallback(updateFoo);
        //service now in control of updating foo
    };
}]);

rootMod.controller('pageTwoCont', [ 'serv', '$scope', function (serv, $scope) {
    'use strict';

    // Your controller implementation goes here ...
    $scope.handleClick = function ($scope, serv){
        var updateFoo = function(){
            $scope.foo = serv.foo;
        };

        aService.registerObserverCallback(updateFoo);
        //service now in control of updating foo
    };
}]);

/* Service */
rootMod.factory('serv', [ function () {

    var observerCallbacks = [];

    //register an observer
    this.registerObserverCallback = function(callback){
        observerCallbacks.push(callback);
    };

    //call this when you know 'foo' has been changed
    var notifyObservers = function(){
        angular.forEach(observerCallbacks, function(callback){
            callback();
        });
    };
}]);

的index.html

<!doctype html>
<html lang="en" ng-app="routeApp">
<head>
    <script src="lib/angular/angular.js"></script>
    <script src="lib/angular/angular-route.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
</head>
<body>
    <li><a href="#pat1"> ONE </a></li>
    <li><a href="#pat2"> TWO </a></li>
</body>
<!-- SinglePage -->
<div ng-view></div>
</html>

PAT1.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular Test</title>
  <link rel="stylesheet" href="css/app.css">
  <link rel="stylesheet" href="css/bootstrap.css">
  <script src="lib/angular/angular.js"></script>
  <script src="js/controllers.js"></script>
</head>

<div ><!--ng-app="myModule" ng-controller="ContactController">-->
  <h1> ONE </h1>
  <button ng-click="handleClick"> BROADCAST </button>
  <div ng-repeat="item in foo">{{ item }}</div> 
</div>
</html>

PAT2.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular Test</title>
  <link rel="stylesheet" href="css/app.css">
  <link rel="stylesheet" href="css/bootstrap.css">
  <script src="lib/angular/angular.js"></script>
  <script src="js/controllers.js"></script>
</head>

<div> <!--ng-app="myModule" ng-controller="ContactController">-->
  <h1> TWO </h1>
  <div ng-repeat="item in foo">{{ item }}</div>
</div>
</html>

Answer 1

JS

您的服务在控制器中注入了serv，但您拨打了aService。请改用serv。
您应该使用rootMod.service()而不是rootMod.factory()，因为您使用this并且未在服务功能中返回任何内容（有关工厂之间的差异，请参阅this和服务）。
没有serv.foo属性。您必须将this.foo = /** something **/;添加到您的服务功能。

所以这应该有效：

var rootMod = angular.module('rootMod', []);


rootMod.controller('pageOneCont', [ 'serv', '$scope', function (serv, $scope) {
    'use strict';

    // Your controller implementation goes here ...
    $scope.handleClick = function ($scope, serv){
        var updateFoo = function(){
            $scope.foo = serv.foo;
        };

        serv.registerObserverCallback(updateFoo);
        // service now in control of updating foo
    };
}]);

rootMod.controller('pageTwoCont', [ 'serv', '$scope', function (serv, $scope) {
    'use strict';

    // Your controller implementation goes here ...
    $scope.handleClick = function ($scope, serv){
        var updateFoo = function(){
            $scope.foo = serv.foo;
        };

        serv.registerObserverCallback(updateFoo);
        // service now in control of updating foo
    };
}]);

/* Service */

rootMod.service('serv', [ function () {

    var observerCallbacks = [];

    // call this when you know 'foo' has been changed
    var notifyObservers = function(){
        angular.forEach(observerCallbacks, function(callback){
            callback();
        });
    };

    // initialize foo here
    this.foo = '';

    // register an observer
    this.registerObserverCallback = function(callback){
        observerCallbacks.push(callback);
    };
}]);

HTML

您将ng-view容器放在body之外。它必须在里面。此外，视图的路径以#/开头，因此您必须更改链接。

<!doctype html>
<html lang="en" ng-app="routeApp">
    <head>
        <script src="lib/angular/angular.js"></script>
        <script src="lib/angular/angular-route.js"></script>
        <script src="js/app.js"></script>
        <script src="js/controllers.js"></script>
    </head>
    <body>
        <li><a href="#/pat1"> ONE </a></li>
        <li><a href="#/pat2"> TWO </a></li>
        <!-- SinglePage -->
        <div ng-view></div>
    </body>
</html>

每个视图只需要放在ng-view容器内的内容。因此，您不能制作完整的HTML文档。

<强> pat1.html

<h1> ONE </h1>
<button ng-click="handleClick"> BROADCAST </button>
<div ng-repeat="item in foo">{{ item }}</div>

<强> pat2.html

<h1> TWO </h1>
<div ng-repeat="item in foo">{{ item }}</div>

在视图/控制器之间共享var

1 个答案:

JS

HTML