Question

我正在学习本教程，一切顺利：http://scotch.io/tutorials/javascript/single-page-apps-with-angularjs-routing-and-templating

除了我$scope.message和/about中的/contact正在改变，但以完全相同的方式添加新范围（$scope.prodoc）不起作用。相反，它在每个页面上显示mainController范围。

以下是三个控制器：

calculatorApp.controller('aboutController', function($scope, $http) {
        //define the hardware data
        $scope.prodoc = 'companyb';
        $scope.message = 'Look! I am an about page.';

    });

    calculatorApp.controller('contactController', function($scope, $http) {
        $scope.prodoc = 'companya';
        $scope.message = 'Contact us! JK. This is just a demo.';
    });


    // create the controller and inject Angular's $scope
    calculatorApp.controller('mainController', function($scope, $http) {

        //define the hardware data
        $scope.prodoc = 'sdf';

        // create a message to display in our view
        $scope.message = 'Everyone come and see how good I look!';

正文标记位于<body ng-controller="mainController">

中

我猜测mainController正在优先考虑，因此不会为每个路由控制器进行更新。

如何强制它获取特定于路线的值？

编辑：这是路由器配置：

calculatorApp.config(function($routeProvider) {
        $routeProvider

            // route for the home page
            .when('/', {
                templateUrl : 'pages/home.html',
                controller  : 'mainController'
            })

            // route for the about page
            .when('/about', {
                templateUrl : 'pages/about.html',
                controller  : 'aboutController'
            })

            // route for the contact page
            .when('/contact', {
                templateUrl : 'pages/contact.html',
                controller  : 'contactController'
            });
    });

虽然我实际上没有任何东西要显示在模板中。我只需要数据的路由（prodoc）

Answer 1

如果要跨子范围共享相同的范围变量，则必须使用点表示法而不是在范围上使用原始值：

// create the controller and inject Angular's $scope
calculatorApp.controller('mainController', function($scope, $http) {        
  $scope.customs = {
    prodoc : 'sdf',
    message : 'Everyone come and see how good I look!'
  };
});

calculatorApp.controller('aboutController', function($scope, $http) {
  $scope.customs.prodoc = 'companyb';
  $scope.customs.message = 'Look! I am an about page.';        
});

calculatorApp.controller('contactController', function($scope, $http) {
  $scope.customs.prodoc = 'companya';
  $scope.customs.message = 'Contact us! JK. This is just a demo.';
});

来自Understanding-Scopes wiki：

范围继承通常很简单，你甚至不需要知道它正在发生......直到你尝试双向数据绑定（即表单元素，ng-model）到一个原语（例如，数字），string，boolean）在子范围内从父范围定义。它不像大多数人期望的那样工作。会发生什么是子范围获取其自己的属性，该属性隐藏/隐藏同名的父属性。这不是AngularJS正在做的事情 - 这就是JavaScript原型继承的工作原理。

...

通过遵循ng-models中always have a '.'的“最佳实践”，可以轻松避免使用原语这个问题 - 观看3分钟。 Misko用ng-switch演示了原始绑定问题。

另见本教程：http://www.youtube.com/watch?v=DTx23w4z6Kc

在AngularJS中赋予路由控制器优先级

1 个答案: