Angular Nested Controller数据访问

时间:2015-09-23 13:42:08

标签: angularjs

我不知道如何从嵌套(子)控制器访问数据。

    <form ng-controller="TestController as test" ng-submit="submit()">
        <h5>Employee name :</h5>
        <div ng-controller="mainCtrl" class="row-fluid">
            <form class="row-fluid">
                <div class="container-fluid">
                    <input type="text" ng-model="name" typeahead="name for name in names | filter:$viewValue" />
                </div>
            </form>
        </div>
        <h5>Comment : </h5>
        <textarea  ng-model="test.test_content"></textarea>
        <input type="submit" id="submit" value="Submit" />
    </form>

如您所见,我有2个控制器。主要是一个表单,第二个是一个输入框,允许用户使用typeahead在列表中搜索名称。

我希望能够在我的TestController中的子控制器(mainctrl)中访问ng-model =“name”的内容。

我尝试使用$ scope.name直接访问它,但它不起作用。 我也尝试过test.name作为ng-model,它也没有用。

我将TestController的数据发送到我的服务器,并希望直接从TestController发送来自mainCtrl的数据(名称)。因此,当我的用户点击提交时,它会在$ http.post请求中发送名称+ test_content。

任何人都知道怎么做?

由于

我发现了这个,但它并没有真正帮助.. https://fdietz.github.io/recipes-with-angular-js/controllers/sharing-models-between-nested-controllers.html

编辑:

我的搜索控制器

          .controller("mainCtrl", function ($scope, $http) {
      $scope.selected = '';
      $http.get('/feedbacks/search.json').
      then(function(response) {
        $scope.succes = " ok "
        $scope.names = response.data;
        // this callback will be called asynchronously
        // when the response is available
      }, function(response) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
          $scope.succes = " error"
      });
  });

我的表单控制器:

    angular.module('FeedbackTool')
    .controller('TestController',['$scope', '$http', function($scope,$http) {
      $http.get('/feedbacks.json').
                        then(function(response) {
                          $scope.succes = " ok "
                          $scope.list = response.data;
                          // this callback will be called asynchronously
                          // when the response is available
                        }, function(response) {
                          // called asynchronously if an error occurs
                          // or server returns response with an error status.
                                                        $scope.succes = " error"
                        });
      $scope.submit = function() {
              $http.post('/feedbacks.json', { data:this.test }).
                        then(function(response) {
              $scope.succes = 'sent';
                          // this callback will be called asynchronously
                          // when the response is available
                        }, function(response) {
                          // called asynchronously if an error occurs
                          // or server returns response with an error status.
                                            $scope.succes = 'fail';

                        });
          };
    }]);

1 个答案:

答案 0 :(得分:0)

可以从子范围内访问父范围,但无法从父范围访问子范围。通常,处理此问题的方法是将子范围中的值分配给已在父级中定义的属性。在您的情况下,我认为您只需要使用test.name作为ng-model表达式。