Question

我正在处理Angular的一些概念，特别是变量和范围的流程。

我要做的是在子控制器中设置一个变量并将其传递给父作用域。考虑这个简单的例子：

module.controller('childController', childController);
function childController($scope,$http,$window, hexafy) {
    $scope.hex = hexafy.myFunc(17);      
}

module.controller('parentController', parentController);
function parentController($scope, hexafy) {

}

module.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});

然后我的加价如下：

{{hex}}

<section data-ng-controller="listingsViewController">....</section>

计算由子控制器处理，但正如您所见，我想将变量传递给“父”。我已经阅读了有关“父”范围的内容，但我知道这不是最佳做法，因此我尝试使用服务。我哪里错了？

Answer 1

您应首先使用子控制器中的服务功能设置值，然后在父控制器中使用父控制器中的getvalue函数。

您的setvalue和getvalue函数应该在使用中。

控制器代码

app.controller('childController', childController);
function childController($scope,$http,$window, hexafy) {
    $scope.childValue = "Value in child controller"
    hexafy.setValue($scope.childValue);      
}

app.controller('parentController', parentController);
function parentController($scope, hexafy) {
  $scope.parentValue = hexafy.getValue()
}

服务代码

app.service('hexafy', function() {

  var value = "";
  this.setValue = function(val) {
    value = val
  },

  this.getValue = function() {
    return value;
  }


    this.myFunc = function (x) {
        return x.toString(16);
    }
});

Html代码

<div ng-controller="childController">
      <h2>Child controller</h2>
      {{childValue}}

    </div>

     <div ng-controller="parentController">
       <h2>Parent controller</h2>
      {{parentValue}}

    </div>

查看工作plunker

Answer 2

有很多不同的方法可以实现这一点，我实际上建议采用以下方法（在父控制器和子控制器中使用通用$scope object variable）而不是使用服务，因为它更容易和更清洁。

然后，您可以使用hex访问父控制器中的$scope.shareValue.hex值。

module.controller('childController', childController);
function childController($scope,$http,$window, hexafy) {
    $scope.shareValue.hex = hexafy.myFunc(17);
}

module.controller('parentController', parentController);
function parentController($scope, hexafy) {
    var shareValue = {
       hex: ''
    };
    $scope.shareValue = shareValue;
}

=============================================== ======================= 使用服务更新：
请参阅Matthew Cawley发表的评论如下。

具有服务的Angular父子范围

2 个答案: