角度控制器作为父控制器中的监视变量答案

【问题标题】：angular controller as watch variable in parent controller角度控制器作为父控制器中的监视变量
【发布时间】：2016-12-27 15:22:56
【问题描述】：

如何查看绑定到父控制器的变量？

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-Function 无法识别父标题的更改..

谢谢！ :)

【问题讨论】：

标签： angularjs parent watch controlleras

【解决方案1】：

在引用属于父对象的对象时，只需访问$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>

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.$watch('$parent.vm.title' .. 成功了。您能否告诉我构建控制器 JS 的更标准化的方式是什么？
当然，我在上面构建它的方式是 AngularJS 作为结构化控制器所拥有的。查看他们的控制器文档以获取有关它的完整信息docs.angularjs.org/guide/controller
谢谢也帮助了我。但 $watch 击中了两次。我们怎么能克服这个。

【解决方案2】：

父控制器：

$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 () { };

【讨论】：