Angular 多个控制器 $scope

Question

我是 Angular 的新手，正在尝试找出不同控制器中的 $scope。我已经阅读了很多主题，但似乎无法找出为什么它在我的代码中不起作用。

我想要的是一个 single-page 应用程序，但它有点复杂（对我来说），用普通的旧 JS 构建它我想将它转换为 angular 但是 $scope 有问题和多个控制器。

当有人点击 'Dongel' 时，它会显示 dongel 的手册。当我单击顶部手册时，它会转到 /dongel-start 并且应该加载 'secondController' 来管理 dongel 安装手册的所有上下文和值，但我似乎无法访问 secondController $scope?

首先，我的 HTML 我设法使用 ng-view 和 $routeProvider

<div id="wrap">

<div ng-view></div>

</div>

我的 angular JS 文件包含以下内容：

(function() {

var app = angular.module("instructions", ['ngRoute']);

app.config(function ($routeProvider) {

    $routeProvider

        .when('/', {
            templateUrl: 'welcome-page.html',
            controller: 'productController'
        })

        .when('/dongel-start', {
            templateUrl: 'dongel-start.html',
            controller: 'secondController'
        })

});

app.controller('productController', function($scope) {

    $scope.products = [
    { 
    name: 'Dongel',
    image: 'images/dongel.png',
    manuals: [
        {
        name: 'Geen Verbinding?',
        value: 'dongel-start'
        },
        {
        name: 'Installatie',
        value: 'dongel-start'
        },
        {
        name: 'APN Controleren',
        value: 'dongel-apn'
        },
        {
        name: 'Saldo',
        value: 'dongel-saldo'
        }
    ],
    value: 'Dongel'
    },
    { 
    name: 'Mifi',
    image: 'images/mifirouter.png',
    manuals: [
        { 
        name: 'Geen Verbinding?',
        value:'mifi-start'
        },
        {
        name: 'APN Controleren',
        value: 'mifi-apn'
        },
        {
        name: 'Saldo',
        value: 'mifi-saldo'
        }
    ],
    value: 'Mifi'
    }
    ];

$scope.showManuals = function(s){
        $scope.current = s.name; /* changing value of current*/
};


});


app.controler('secondController', function($scope) {

    $scope.systems = [
        {
            name: 'Windows'
        },
        {
            name: 'Apple'
        }
        ];

});


})();

第一页工作正常，它采用 $scope.products 的值当我到达第二页时：

    <h2>Kies een besturingssysteem</h2>

    <ul style="height:100px;">
        <li ng-repeat="system in systems">
        {{system.name}}
        </li>
    </ul>

我正在尝试再次访问变量，但没有任何结果我已将 'secondController' 分配给此页面，但 $scope 与第一页不一样。

第二页的结果只显示我手动输入的标题.. 我似乎无法访问

{{system.name}}

我会做一个 fiddle 但它不支持路由 :/

Answer 1

您在 secondController 定义中有错字。你有 app.controler，这显然不是从 secondController 中创建控制器，而是其他的。

Angular 多个控制器 $scope

Angular multiple controllers $scope

javascript

angularjs

angularjs-scope

angularjs-controller