angularjs - 如何在 Angular 中使用带有子控制器的视图？

Question

在我的应用程序中，我有一个主控制器，在该控制器的模板/视图中，我通过调用第二个控制器<div ng-controller="BasketCtrl"></div>。但是我如何告诉“BasketCtrl”使用某个视图/模板？

我不想在我的“$routeProvider”中使用这个“篮子”，因为它将在我的网站上使用。

购物篮将是每个模板的一部分，显示购物车的内容。因此，我不想在 DIV 中创建必要的 HTML，这会导致大量代码的重复......我可能在这里出错了吗？

Answer 1

我会创建一个购物篮指令。像这样的东西：

app.directive('basket', function(){
    return {
        templateUrl: 'basket-template.html',
        link: function(scope, element, attr){
        }
    }
});

然后，您可以将它包含在任意数量的模板中。在此处阅读有关指令的更多信息：http: //docs.angularjs.org/guide/directive

Answer 2

只需在您添加 ng-controller 的 div 中模板化 BasketController。它是一个嵌套模板。

<div ng-controller="BasketCtrl">
    <!-- put template inside of basketctrl -->
</div>

或者，如果您希望您的 basketctrl 在另一个文件中，您可以在您的 BasketCtrl 中执行 ng-include 并包含指向该模板的链接：

<div ng-controller="BasketCtrl">
    <div ng-include="'foo/bar/BasketTemplate.html'">
</div>

确保在其中同时使用双引号和单引号。否则它将无法正常工作。