2014-02-17 23 views
0

我下面这个教程给予路由控制器优先,一切都很顺利:http://scotch.io/tutorials/javascript/single-page-apps-with-angularjs-routing-and-templating在AngularJS

除了我$scope.message正在改变罚款​​和/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标签是在<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

+0

你能告诉模板? –

+0

和'$ routeProvider'配置? –

+0

@IlanFrumer - Mah nishma。我添加了路由。该模板可以忽略不计,因为我不需要任何视图的路由。仅将数据传递到主控制器。我做错了吗? – itamar

回答

2

路由如果你想分享整个子作用域范围相同的变量,你必须使用点符号,而不是使用的范围为原始值:

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

范围继承通常是简单的,你经常甚至不需要知道它正在发生...直到你尝试2路数据结合蛋白(即,表格元素,ng-模型)映射到在子范围内在父范围上定义的基元(例如,数字,字符串,布尔值)。它不能像大多数人所期望的那样工作。会发生什么情况是,子作用域会获取自己的属性,该属性会隐藏/隐藏相同名称的父属性。这不是AngularJS正在做的 - 这是JavaScript原型继承的工作原理。

...

这与原语问题可以通过以下的always have a '.'的“最佳实践”在你的NG-模型很容易地避免 - 看3分钟价值。 Misko演示了ng-switch的原始绑定问题。

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

+0

TODA!这工作完美!唯一需要改变的是将初始数据定义放在mainController中。我建议编辑。 – itamar

+1

@itamar是啊,这就是我所说的:) –