目标

Question

目标

使用ng-repeat创建多个指令实例。

问题

{{box}}未按照我的预期在以下代码中进行评估：

<div ng-controller='ClickboxCtrl' ng-repeat="box in lmfOptionset.boxes">
    <div lmf-clickbox='{{box}}' class='lmf-clickbox'></div>
</div>

相关代码（我认为。）

ClickboxCtrl

.controller('ClickboxCtrl', ['$scope', function($scope){
    $scope.traditional =    {
                            title           : 'Traditional',
                            description     : 'This is the description',
                            background_img  : ''
                            };
    $scope.cross_slot =     {
                            title           : 'Cross Slot',
                            description     : 'This too.',
                            background_img  : ''
                            };
}])

OptionsetCtrl

.controller('OptionsetCtrl', ['$scope', function($scope){
    $scope.traditional_or_cross_slot =  {
                                            boxes : ['traditional', 'cross_slot'],
                                            header: 'Would you prefer?'
                                            };

lmfOptionset

.directive('lmfOptionset', function() {
return {
    scope: {
        'lmfOptionset' : '='
    },
    link: function(scope){

    },
    templateUrl: 'option_set/option_set.html'
}
})

lmfClickbox

.directive('lmfClickbox', ['State', function(State) {
return {
    scope: {
        lmfClickbox: '@'
    },
    link: function($scope, element, attrs){

        element.on('click', function(){
            //When a clickbox is clicked, add it to the state.
            State.add_option(attrs.lmfClickbox);
        });
    },
    templateUrl: 'clickbox/clickbox.html'
};
}])

我尝试过什么

我现在只使用Angular大约四天了，所以我仍然在学习很多东西。它有许多新术语（包含，指令等）可供习惯。但是，我的研究让我有了很多想法。

最初，我认为这是一个范围问题，我需要看看我使用隔离范围（'='，'＆amp;'，'@'）的方式，但我的这些组合并没有导致任何地方

之后，我意识到刷新页面后，我收到了以下代码：

<div lmf-clickbox="{{box}}" class="lmf-clickbox ng-isolate-scope"><div class="lmf-title ng-binding"></div>

所以我想，也许这是一个时间问题？所以我尝试使用此stackoverflow question中的代码添加一些代码来评估它，但我没有找到任何运气。

最后我尝试将transclusion: true添加到我的指令中，因为我只需要尝试别的东西。

任何帮助都会受到这个问题的欢迎！

Answer 1

我看到了很多问题。

首先，，正如Samuel Neff所指出的，如果你想在lmfOptionset中访问ng-repeat，它需要是范围变量，而不是指令。所以你需要这样的东西：

.controller('ClickboxCtrl', ['$scope', function($scope) {
    $scope.lmfOptionset = { boxes: ['box1', 'box2', 'etc'] };
}])

或者，根据您显示的代码，您可以在HTML中使用以下内容（假设您在此之前的某处已实例化OptionsetCtrl）：

<div ng-controller='ClickboxCtrl' ng-repeat="box in traditional_or_cross_slot.boxes">

其次，如果要访问属性中的范围变量，则不需要{{}}括号。只需输入变量名称即可。 Angular会将该属性的内容或多或少地解释为javascript（只要你正确配置了指令），这就把我们带到了第三点......

第三，如果要将范围变量传递给指令，请使用=符号。

.directive('lmfClickbox', ['State', function(State) {
    return {
        scope: {
            lmfClickbox: '='
        }
    };
}

第四，如果要在链接功能中访问该范围变量，请使用$scope，而不是attrs。

.directive('lmfClickbox', ['State', function(State) {
    return {
        scope: {
            lmfClickbox: '='
        },
        link: function($scope, element, attrs){

            element.on('click', function(){
                //When a clickbox is clicked, add it to the state.
                State.add_option($scope.lmfClickbox);
            });
        },
        templateUrl: 'clickbox/clickbox.html'
    };
}])

使用ng-repeat创建多个指令实例

目标

问题

相关代码（我认为。）

我尝试过什么

1 个答案: