Question

我用angularjs移动我的第一步。

我有一个控制器来调用服务，该服务返回一个网址列表（父级）。

我想渲染一个html ul ，其中每个 li 由另一个具有自己模板的控制器（孩子）呈现。我想象这样的事情：

<ul ng-controller="ListCtrl">
    <li ng-repeat="element in elements">
        <div ng-controller="DetailCtrl">
            {{oneField}} - {{anotherField}}
        </div>
    </li>
</ul>

第一个控制器易于实现：

myApp.controller('ListCtrl', function ($scope, $http) {

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

但是对于第二个我有一个问题，因为我无法弄清楚控制器如何知道哪个url用于ajax调用（DYNAMYC_URL）：

myApp.controller('DetailCtrl', function ($scope, $http) {

    $http.get(DYNAMYC_URL)
    .success(function(data) {
        $scope.element = data;
    });
});

你能否告诉我哪种方法可以解决这个问题呢？

我也考虑在第一个控制器内进行多次调用，但它对我来说似乎不是一个干净的解决方案。

Answer 1

我们将尝试在元素中维护childRenderUrl函数调用的状态在ng-unit属性中初始化元素本身。

而不是DetailCtrl 我们编写了一个定义为

的函数renderChild

 $scope.renderChild =function(element)
 { 
    $http.get(element.url)
     .success(function(data) {
     // add all required fields to element here 
      element.otherField=data.otherField;
      element.sometherField=data.sometherField;
      //a $scope.$digest may be required here
   });
 }

你的显示逻辑是

       <ul ng-controller="ListCtrl">
         <li ng-repeat="element in elements">
          <div ng-init="renderChild(element)">
            {{element.oneField}} - {{element.anotherField}}
           </div>
         </li>
       </ul>

在初始化时，我们会调用renderChild方法将两个属性添加到将被适当显示的元素对象表达式{{element.oneField}} - {{element.anotherField}}

angularjs：如何根据父结果调用控制器

1 个答案: