unable to make custom html with angular tags work with select2

Question

I am using angular-ui's ui-select2. I want to add custom html formatting to the selections. Select2 allows this by specifying the formatSelection in its config.

I have html with angular tags as below that I want to use for formatting the selection-

var format_code = $compile('<div ng-click="showHide=!showHide" class="help-inline"><div style="cursor: pointer;" ng-show="!!showHide" ng-model="workflow.select" class="label">ANY</div><div style="cursor: pointer;" ng-hide="!!showHide" ng-model="workflow.select" class="label">ALL</div></div>')( $scope );


 var format_html = "<span>"  + data.n + ' : ' + data.v +' ng-bind-html-unsafe=format_code'+ "</span>"

$scope.select_config = {
    formatSelection: format_html
}

If I compile the html as in above and assign it, I just see an [object,object] rendered in the browser. If I dont compile it, I see the html rendered properly, but the angular bindings dont happen, ie the clicks dont work.

Any ideas what is wrong?

I'm having the exact same issue. Has anyone found a solution yet? — Brian A Bird
– Brian A Bird, Commented Jun 25, 2013 at 2:44

DrDyne · Accepted Answer · 2014-02-20 21:33:01Z

I had the same problem, select2 loading in a jquery dialog and not using the options object I would give it.

What I ended up doing is isolating the element in a directive as following:

  define(['./module'], function (module) {
    return module.directive('dialogDirective', [function () {
      return {
        restrict: 'A',
        controller: function ($scope) {
          console.log('controller gets executed first');
          $scope.select2Options = {
            allowClear: true,
            formatResult: function () { return 'blah' },
            formatSelection: function () { return 'my selection' },
          };
        },
        link: function (scope, element, attrs) {
          console.log('link');
          scope.someStuff = Session.someStuff();

          element.bind('dialogopen', function (event) {
            scope.select2content = MyResource.query();
          });
        },
      }
    }]);

and the markup

   <div dialog-directive>
          {{select2Options}}
          <select ui-select2="select2Options" style="width: 350px;">
            <option></option>
            <option ng-repeat="item in select2content">{{item.name}}</option>
          </select>
          {{select2content | json}}
        </div>

What is important here:

'controller' function gets executed before html is rendered. That means when the select2 directive gets executed, it will already have the select2Options object initialized.

'link' function populates the select2content variable asynchronously using the MyResource $resource.

Go on and try it, you should see all elements in the dropdown as "blah" and selected element as "my selection".

hope this helps, that was my first post to SO ever.

Collectives™ on Stack Overflow

unable to make custom html with angular tags work with select2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related