Угловой контроллер как переменная часов в родительском контроллере

Как посмотреть переменную, которая привязана к родительскому контроллеру?

function config($stateProvider) {
    $stateProvider
        .state('home', {
            url: '/',
            templateUrl: 'home.html',
            controller: 'HomeController',
            controllerAs: 'vm'
        })

        .state('home.child', {
            url: '/child',
            templateUrl: 'child.html',
            controller: 'ChildController',
            controllerAs: 'vm'
        });
}

function HomeController($scope) {
    this.title = 'Some Title';
}

function ChildController($scope) {
    var vm = this;
    $scope.$watch('vm.title', function(current, original) {
        $log.info('title was %s', original);
        $log.info('title is now %s', current);
    });

}

Функция Watch не распознает изменения родительского заголовка.

Спасибо!:)

Источник

2 ответа

Решение

Просто получить доступ к $parent область действия при ссылке на объекты, принадлежащие родителю. Также привыкните к более чистому и более стандартизированному способу структурирования вашего контроллера JS.

HTML

<html ng-app="myApp">
  <body>
    <div ng-controller="HomeController">
      <input type="text" ng-model="title">
      <div ng-controller="ChildController"></div>
    </div>
  </body>
</html>

JS

var app = angular.module("myApp", []);
app.controller("HomeController", ['$scope', '$log', function ($scope, $log) {
  $scope.title = "Some Title";
}]);

app.controller("ChildController", ['$scope', '$log', function ($scope, $log){
  $scope.$watch('$parent.title', function(newValue, oldValue) {
    $log.info('title was %s', oldValue);
    $log.info('title is now %s', newValue);
  });
}]);
Источник

Родительский контроллер:

$scope.cancelFlag = false;

Детский Контроллер:

1) $parent.cancelFlag ссылается на родительский контроллер.

2) Если мы сделаем какие-либо изменения в родительском контроллере, watch будет вызван в дочернем контроллере.

Пример:

$scope.cancelFlag = true or false;

3) Здесь мы можем вызвать метод дочернего контроллера, внеся изменения в родительский контроллер.

     $scope.$watch('$parent.cancelFlag', 
     function (newVal, oldVal)
     {
        if (newVal != null && newVal==true)
            $scope.childControllerMethod();
    });
    $scope.childControllerMethod= function () { };
Источник
Другие вопросы по тегам