Question

我有一个html文件和一个通过$ routeProvider分配的控制器

.when('/page/:pageId', {
            templateUrl: 'xxxx.html',
            controller: 'PageCtrl'
        })

并在controller.js文件中，我使用{Page 1}＆＃39; PageCtrl＆＃39;中的$routeParams访问pageId的值。功能

  pageId = $routeParams.pageId;

并且在视图中html是

<div ng-controller="headerController">
  {{page.pageId}}
</div>

所以在html中我想显示pageId，如果在网址中传递了pageId。

所以这里我的问题是，一旦pageId正确传递到Js中的pageCtrl并分配了pageId范围值，我也可以将相同的范围值分配给第二个控制器＆＃39; headerController＆＃39;按$controller('headerController', {$scope: $scope});

能够看到范围值从一个控制器更新到另一个控制器但我的问题是更新的范围值，无法在html中查看（{{page.pageId}}）

Answer 1

问题是您的控制器实例化了两次：一次来自您的$controller调用，另一次来自您视图中的ng-controller指令，每次都有不同的范围，后者“胜出” “就你的观点中所显示的内容而言。

考虑这个small demo：

JS

.controller('FirstController', function($scope, $controller){
   console.log('FirstController', $scope.$id); // logs 003
   $scope.pageId = '12345';
   $controller('SecondController', {$scope: $scope});
})
.controller('SecondController', function($scope){
    console.log('SecondController', $scope.$id); // logs 003 & 004
    $scope.scopeId = $scope.$id; // second scope "wins", appears in view
});

HTML

<div ng-controller="FirstController"></div>
<!-- {{scopeId}} outputs a value while {{pageId}} does not -->
<div ng-controller="SecondController">Scope: {{scopeId}} Page: {{pageId}}</div>

更好的解决方案是在控制器之间use a service to share data。

在第二个控制器中更新的Angularjs $范围值在视图中不可见

1 个答案: