AngularJS directive template doesn't get compiled

Question

I'm trying to create an Angular multi-select custom directive: a modal with a list of choices with checkboxes. I use isolated scope. However, the directive template is appended as such, angular expressions are not interpreted, after a lot of research and thinking, I still don't know what I'm doing wrong since this is a pretty basic task.

(jFiddle is here 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;
            };                                 
       }
   } 
});

Any idea why it's not working ?

Can you provide a demo? If you're in strict mode, it shouldn't even load, since you got a duplicate data property (2x replace:true). — xsh.7
– xsh.7, Commented Jul 25, 2014 at 7:26
When you have that much html you should use templateUrl instead of template and put your html in a different file. — Gustav
– Gustav, Commented Jul 25, 2014 at 7:30
@naeramarth7 I removed second instance of 'replace:true', but still the same I'll try to provide a demo — webaba
– webaba, Commented Jul 25, 2014 at 7:33

xsh.7 · Accepted Answer · 2014-07-25 08:15:33Z

1

Don't use the ngOptions directive here (ng-options="choices"), since it's a directive used on select controls.

See: http://jsfiddle.net/ev52F/10/

answered Jul 25, 2014 at 8:15

xsh.7

6,2701 gold badge25 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

webaba Over a year ago

Thanks so much, you saved my day! After some more research, ngOptions is a "terminal" directive (terminal:true), which means that it doesn't not allow any nested directive.

Collectives™ on Stack Overflow

AngularJS directive template doesn't get compiled

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related