Question

我们有一些这样的数据： -

    fruits: [
        {
           type : "Apple",
           colour: "red"
        },
       {
          type: "Orange"
       }
    ]

为了生成这个，我们有以下内容： -

<div ng-controller="FruitsController as fruitCtrl">
   <div ng-repeat="fruit in fruitCtrl.fruits" ng-include="fruitCtrl.findInclude(fruit)" ng-init="fruit"></div>
</div>

fruitCtrl.findInclude用于指定模板的位置。模板将是这样的： -

<div ng-contoller="AppleController as appleCtrl">
   {{ appleCtrl.data }}
</div>

ng-init就在那里，所以我们可以在ng-include中定义的任何控制器中获取水果。

这对我来说非常笨拙，特别是在控制器中，最终看起来像这样： -

 function AppleController($scope, colourService) {
        var vm = this;

        init();

        function init() {
              vm.data = colourService.convert($scope.fruit.colour);
        }
    }

有关如何减少笨重和清晰度的任何想法？具体来说，我想不出一种避免在AppleController中使用ng-init和访问$ scope的方法。这使得在单独查看AppleController时很难理解发生了什么。

此示例在此plunkr中提供 http://plnkr.co/edit/KitUvUnz52Ttl7fBVQxB?p=preview

修改我有编码错误。我没有在AppleController中引用$ scope.fruit。这已得到修复。

使用ng-include + ng-repeat，这样就不会笨拙

0 个答案: