在AngularJS

  • Z时代
  • 2024-01-10
  • 分类：问答

我下面这个教程给予路由控制器优先，一切都很顺利：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）

回答：

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

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

以上是 在AngularJS 的全部内容， 来源链接： utcz.com/qa/264531.html

回到顶部