Question

我正在尝试创建一个Angular多选自定义指令：一个带有复选框选项列表的模态。我使用孤立的范围。但是，指令模板是这样附加的，角度表达式不会被解释，经过大量的研究和思考，我仍然不知道我做错了什么，因为这是一个非常基本的任务。

（jFiddle在这里http://jsfiddle.net/webaba/ev52F）

app.directive('pickFromList', function(){
   return {
    restrict: 'EA',
    scope:{           
        model: '=ngModel',
        options: '=ngOptions',
        title: '@',
        label: '@',
        idField: '@idField',
    },
    replace:true,
    template: '<div ng-init="open=false"><button class="btn btn-info" ng-click="open=true">Test</button>'+
            '<div class="modal" ng-show="open">'+
                '<div class="modal-header">'+
                    '<button type="button" class="close" ng-click="open=false">✕</button>'+
                    '<h3>{{ title }}</h3>'+
                '</div>'+
                '<div class="modal-body" style="text-align:center;">'+
                    '<div ng-repeat="option in options" style="text-align:\'left\'">'+
                        '<ul class="unstyled">'+
                            '<li class=""><input ng-click="toggleItem(option[idField])" ng-checked="itemSelected(option[idField])" type="checkbox"></input> {{ option[label] }}</li>'+
                        '</ul>'+
                    '</div>'+
                '</div><!-- end modal body-->'+
                '<div class="modal-footer">'+
                    '<div class="controls">'+
                        '<button class="btn btn-success" type="submit" ng-click="open=false">Ok</button>'+
                    '</div>'+
                '</div>'+
            '</div>'+
        '</div>',
    link: function(scope, element, attr){
        scope.open = false;
    },
       controller: function($scope){

            $scope.selectAll = function () {
                 $scope.model = _.pluck($scope.options, $scope.idField);
                console.log($scope.model);
            };            
            $scope.deselectAll = function() {
                $scope.model=[];
                console.log($scope.model);
            };
            $scope.toggleItem = function(id){
                if (_.contains($scope.model, id)) {
                    $scope.model = _.without($scope.model, id);
            } else {
                    $scope.model.push(id);
                }
                console.log($scope.model);
                return false;
            };
            $scope.itemSelected = function (id) {                 
                if (_.contains($scope.model, id)) {
                    true;//return 'icon-ok';// pull-right';
                }
                return false;
            };                                 
       }
   } 
});

知道为什么它不起作用吗？

Answer 1

此处不要使用ngOptions指令（ng-options="choices"），因为它是用于选择控件的指令。

请参阅：http://jsfiddle.net/ev52F/10/

AngularJS指令模板没有编译

1 个答案: