Javascript 角度中的嵌套指令/控制器

我只是在脑子里转来转去——由于我来自于思想的主干学派，我没有理解一些概念

我随机挑选了一个项目开始：纸牌游戏

假设我想定义一个

手

控制器和一个

卡

控制器。为了简单起见，我希望将它们作为指令

以下是card指令：

app.directive('card', function(){

    return {
        restrict:'E',
        templateUrl:'card.html',
        controller:function($scope){
            this.suit = 'clubs';
            this.rank = 'a';
            this.suitClass = function(){
                return this.suit + '-' + this.rank;
            }
        },
        controllerAs:'card'
    };
});

app.directive('hand', function(){

    return {
        restrict:'E',
        template:'hand.html',
        controller:function($scope){
            this.cards = [
                {suit:'clubs', rank:'a'},
                {suit:'spades', rank:'10'},
                {suit:'hearts', rank:'2'},
                {suit:'diamonds', rank:'k'}
            ];
        },
        controllerAs:'hand'
    }
});

这是手指令：

app.directive('card', function(){

    return {
        restrict:'E',
        templateUrl:'card.html',
        controller:function($scope){
            this.suit = 'clubs';
            this.rank = 'a';
            this.suitClass = function(){
                return this.suit + '-' + this.rank;
            }
        },
        controllerAs:'card'
    };
});

app.directive('hand', function(){

    return {
        restrict:'E',
        template:'hand.html',
        controller:function($scope){
            this.cards = [
                {suit:'clubs', rank:'a'},
                {suit:'spades', rank:'10'},
                {suit:'hearts', rank:'2'},
                {suit:'diamonds', rank:'k'}
            ];
        },
        controllerAs:'hand'
    }
});

使用，我希望能够简单地插入

元素，让angular为我完成所有工作。在我看来，应该有代表不同套装的卡片嵌套在

指令中。我错过了什么？目前，正如您在plunker中所看到的，嵌套的控制器/指令没有正确地实例化视图

---

我是不是太看重MVC了？OOP困扰着我吗？还是angular设计得很糟糕？

我不能100%肯定我理解你的问题，但我认为这是一种更好的写作方式：

var app = angular.module('app', []);

app.directive('card', function(){

    return {
        restrict:'E',
        templateUrl:'card.html',
        replace: true,
        link: function ($scope, element, attrs){
            $scope.suit = 'clubs';
            $scope.rank = 'a';
            $scope.suitClass = function(){
                return this.suit + '-' + this.rank;
            }
        }
    };
});

app.directive('hand', function($compile){

    return {
        restrict:'E',
        templateUrl:'hand.html',
        link:function($scope, element, attrs){
            $scope.cards = [
                {suit:'clubs', rank:'a'},
                {suit:'spades', rank:'10'},
                {suit:'hearts', rank:'2'},
                {suit:'diamonds', rank:'k'}
            ];
        }
    }
});

html可以是这样的： （手动指令模板）

和（卡指令模板）

{{suit}}

我将通过自上而下遍历将被调用的元素/对象的顺序来解释问题：

手动指令：

到目前为止，指令还可以。但是$compile参数和$scope参数没有被使用，因此应该删除。更清楚地说，我将此应用于变量手，但它不会改变应用程序的行为

app.directive('hand', function(){

  return {
    restrict:'E',
    templateUrl:'hand.html',
    controller:function() {
      var hand = this;
      hand.cards = [
        {suit:'clubs', rank:'a'},
        {suit:'spades', rank:'10'},
        {suit:'hearts', rank:'2'},
        {suit:'diamonds', rank:'k'}
      ];
    },
    controllerAs:'hand'
  }
});

hand.html:

您从未将ng repeat的当前卡传递给card指令。 这样，您只生成卡片模板乘以卡片数量，而不使用实际值

我删除了过时的div标记，并将hand.html增强为：

<card ng-repeat="card in hand.cards" card-model="card"></card>

card.html:

这个观点是正确的。我只应用了我的更改：

<div ng-class="card.suitClass()">{{ card.cardModel.rank }}</div>

{{card.cardModel.rank}

---

我希望它对任何人都有用。

经过一些小改动，controllerAs的“card”和repeat的“card”在这个范围内崩溃了。这远不是一个完美的解决方案，但希望做尽可能少的更改，以便您可以看到如何设置它来工作。@JimL感谢plunker。那么，我是否正确地假设这两个视图之间没有真正的关系，接受来自

hand

的属性，通过

$scope

名称空间以组合方式添加到新的

卡中。但是你能解释一下
link
希望在这里实现什么吗？我有，而且它似乎正在用
div
替换
card
元素，并且无法调用
suitClass
方法进行适当的样式设置。
<div ng-class="card.suitClass()">{{ card.cardModel.rank }}</div>