Значение Angularjs $scope обновлено во втором контроллере, не видном в представлении

У меня есть один html-файл и контроллер, назначенный через $routeProvider

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

и в файле controller.js я получаю доступ к значению pageId, используя $routeParams в функции «PageCtrl».

  pageId = $routeParams.pageId;

и в виду html

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

поэтому в html я хочу отобразить pageId, если pageId передается в URL-адресе.

так что здесь мой вопрос заключается в том, что после того, как pageId будет передан, он будет правильно передан pageCtrl в Js и присвоено значение области pageId, и я также могу назначить одно и то же значение области второму контроллеру 'headerController' с помощью $controller('headerController', {$scope: $scope});

могу видеть, что значение области действия обновляется с одного контроллера на другой контроллер, но моя проблема заключается в том, что значение области действия, которое обновляется, невозможно просмотреть в html ({{page.pageId}})


angularjs angularjs-scope angularjs-routing
person user3714406    schedule 09.06.2014    source источник
comment
Можете ли вы привести пример того, что вы ожидаете, и что происходит на самом деле?   -  person Claies    schedule 09.06.2014

Ответы (1)


arrow_upward
1
arrow_downward

Проблема в том, что ваш контроллер создается дважды: один раз из вашего вызова $controller, а другой раз из директивы ng-controller в вашем представлении, каждый раз с разницей в области видимости, где последний «побеждает» в том, что отображается в вашем представлении. .

Рассмотрим эту небольшую демонстрацию:

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>

Лучшим решением является использование службы для обмена данными между контроллерами.

person Marc Kline    schedule 09.06.2014