Question

我的观点如下（为简洁起见缩短）：

<ul class="nav nav-tabs nav-stacked">
    <li ng-repeat="i in range">
        <a id="list{{i}}" ng-click="ShowList(i)">
            List Item {{i}}
        </a>
    </li>
</ul>

<ng-switch on="listItemType">
    <div ng-switch-when="1">
        <form-a></form-a>
    </div>
    <div ng-switch-when="2">
        <form-b></form-b>
    </div>
    <div ng-switch-when="3">
        <form-c></form-c>
    </div>
</ng-switch>

<form-a>, <form-b>, <form-c>是角度指令，它们加载templateUrl并拥有自己的控制器。

上述观点的控制器是：

var listCount;
var listIds = [];
$http.get('/api/lists').
    success(function(data) {
        $scope.lists = data.lists;

        for (listCount = 1; listCount <= $scope.lists.length; listCount++) {
            listIds.push(listCount);
        }

        $scope.range = listIds;
    });
$scope.ShowList = function(listNumber) {
    $scope.listItemType = $scope.lists[listNumber - 1].listType;
};

可以看出，该控制器使用$ http.get（）获取一些数据现在，<form-a>的控制器发布了一些数据。这会更新上述控制器提取的相同数据。换句话说，我需要在视图开头的<li>标记中添加一个新条目。

但是，该页面的控制器已经完成了$ http.get（）请求。如何让它再次获取数据，以便第一个控制器中的列表信息得到更新？换句话说，在数据发生变化的情况下，第一个控制器中是否有一个事件处理程序可以再次使用$ http.get（）数据？
由于页面没有刷新或重新加载，控制器，我上面的代码只调用$ http.get（）一次，如果同一页面中指令的控制器更新数据，第一个控制器就没办法更新其数据。

Answer 1

你只需在函数中包装$ get调用并再次调用它。

我们可能需要了解更多你要做的事情......但请考虑一下：

function ParentCtrl($scope, $http) {
   $scope.foo = [];

   $scope.loadFoo = function () {
       $http.get('/foo/data')
            .success(function(data) {
               $scope.foo = data;
            });
   };

   $scope.loadFoo();
}

function ChildCtrl($scope) {
   $scope.loadFoo(); //still here from Parent scope.
}

但是，你真的没有提供足够的信息来回答你的问题，因为你使用指令，如果你隔离了范围，你必须将参考传递给你loadFoo（）方法：

app.directive('testDir', function (){
   return {
     restrict: 'E',
     scope: {
       'loadFoo': '&'
     },
     link: function(scope) {
       scope.loadFoo();
     }
   }
});

用作：

<test-dir load-foo="loadFoo()"></test-dir>

如何在不重新加载页面的情况下第二次使用$ http.get（）更新AngularJS控制器中的数据

1 个答案: