CODEWITHSUNDEEP
angularjs
murtaza52
murtaza52

Reputation: 47441

unable to make custom html with angular tags work with select2

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?

Upvotes: 1

Views: 365

Answers (1)

DrDyne
DrDyne

Reputation: 1602

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.

Upvotes: 2

Related Questions