在AngularJS

我下面這個教程給予路由控制器優先，一切都很順利：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）

來源

2014-02-17 itamar

你能告訴模板？ –

和'$ routeProvider'配置？ –

@IlanFrumer - Mah nishma。我添加了路由。該模板可以忽略不計，因爲我不需要任何視圖的路由。僅將數據傳遞到主控制器。我做錯了嗎？ – itamar

路由如果你想分享整個子作用域範圍相同的變量，你必須使用點符號，而不是使用的範圍爲原始值：

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

來源

2014-02-17 17:00:43

TODA！這工作完美！唯一需要改變的是將初始數據定義放在mainController中。我建議編輯。 – itamar

@itamar是啊，這就是我所說的:) –

回答

相關問題